Աշխատելով բարդ նախագծի վրա՝ անկախ նրանից՝ դուք փորձառու ծրագրավորող եք, թե առաջին կուրսեցի, դուք, ամենայն հավանականությամբ, խնդիրներ կունենաք: Երբ ձեր նախագիծը բաժանում եք բազմաթիվ մոդուլների, խնդիրներ են առաջանում, ինչը դժվարացնում է սխալների հայտնաբերումը և լուծումներ գտնելը: Այլ հանգամանքներում առանձին դեպքերի վրիպազերծումը կարող է դժվար լինել, քանի որ դուք չեք գտել խնդրի ճիշտ լուծումը, որի վրա աշխատել եք:
Այն նաև երբեմն հայտնվում է որպես կոդի կտոր, որը կարող է այդ պահին բարդ թվալ: JavaScript-ը վեբ վրա հիմնված լեզուներից մեկն է, որը չափազանց պարզ է սովորել: Պարզապես գործարկեք ձեր աշխատասեղանի զննարկիչը և նավարկեք դեպի Developer Tools (սովորաբար F12), և դուք պատրաստ եք: Այնուհետև կարող եք փորձարկել JS-ի հետ՝ առանց որևէ բարդ ծրագրակազմ տեղադրելու կամ գործարկելու անհրաժեշտության:
Սկսելու համար ձեզ հարկավոր է ընդամենը բրաուզեր: Հրաշալի է ունենալ այս ամբողջ պարզությունը անմիջապես տուփից, բայց կան դեպքեր, երբ ձեզ ավելին է պետք: Օրինակ, ենթադրենք, որ ցանկանում եք փորձարկել նոր Web API, որը վերջերս եք հայտնաբերել, բայց չեք ցանկանում սկսել նոր նախագիծ:
Այս գրառման մեջ մենք կհամեմատենք և կհակադրենք երեք ամենահայտնի JS խաղահրապարակները՝ CodePen-ը, CodeSandbox-ը և StackBlitz-ը: Եկեք սկսենք!
CodePen
Frontend վեբ մշակման գործիքները միշտ զարգանում են, և տեքստային խմբագրիչները նորագույն տեխնոլոգիաների մեծ բաղադրիչն են, որոնք ծրագրավորողի կյանքն ավելի հեշտ են դարձնում: Բացի առանձին տեքստային խմբագրիչներից, ինչպիսիք են Atom-ը կամ Notepad ++-ը, վերջին տարիներին տեղի է ունեցել բրաուզերի վրա հիմնված խմբագրիչների պայթյուն, որոնք չեն պահանջում ծրագրի տեղադրում և նպաստում են ավելի մեծ համագործակցության:
CodePen-ը «օգտատիրոջ կողմից ստեղծված HTML, CSS և JavaScript կոդերի հատվածներ փորձարկելու և ներկայացնելու առցանց համայնք է», որն առաջարկում է ֆանտաստիկ հնարավորություններ սովորելու, թե ինչպես ավելի լավ գրել ճակատային վեբ էջերը:
CodePen-ը ձեզ տալիս է երկու «ռեժիմ»: Առաջինը և ամենատարածվածը գրիչն է: Դա այնքան պարզ է, որքան կոճակը սեղմելը և անմիջապես խմբագրին տեղափոխելը: Այնտեղից կարող եք մուտք գործել նախադիտման վահանակ, ինչպես նաև հիմնական HTML, CSS և JS խմբագրման պատուհաններ:
Չկա «ֆայլային համակարգ», «IntelliSense» կամ որևէ այլ բան. պարզապես պարզ շարահյուսական ընդգծում և արագ հրամաններ, ինչպիսիք են prettify-ը: Ընտրանքներ ներդիրում կարող եք ընտրել նախապրոցեսորների սահմանափակ շրջանակից բոլոր երեք լեզուների համար (օրինակ՝ TypeScript JS-ի համար) կամ կապեր ավելացնել արտաքին աղբյուրներին:
Եթե ձեզ միայն անհրաժեշտ է որևէ բան անել անվճար, խմբագիրներից որևէ մեկը բավարար կլինի: Ես կառաջարկեի CodePen-ը այն ամենի համար, որը չի պահանջում շատ կարգավորումներ կամ գրադարաններ. պարզապես HTML, CSS և JS՝ վերևում ընտրովի նախնական պրոցեսորներով: Եթե ցանկանում եք օգտագործել խաղահրապարակը սոցիալական ցանցերում ձեր ներկայությունը բարելավելու կամ անձնական պորտֆոլիո զարգացնելու համար, CodePen-ը ավելի լավ տարբերակ է:
Պրեմիում տարբերակ
Դուք ունեք ևս մի քանի այլընտրանքներ, որոնցից կարող եք ընտրել CodePen-ից: Եթե վճարում եք տարեկան, կարող եք ստանալ երեք պրեմիում պլաններից մեկը՝ $12, $19 կամ $39 ամեն ամիս: Դուք կարող եք ստեղծել անսահման թվով անձնական գրիչներ, գրառումներ և հավաքածուներ երեք մակարդակներից որևէ մեկում:
Դուք նաև կստանաք Pro կրծքանշան (սոցիալական խթանում), ուղիղ համագործակցության ռեժիմ, առանց գովազդի և ավելին: Կան նաև որոշակի թիմային ռազմավարություններ և այլ տարբեր աստիճանի տարբերություններ: Լրացուցիչ տեղեկությունների համար ստուգեք նրանց պաշտոնական վճարային խորհուրդը:
ԿԱՐԵՎՈՐ մասեր
Բացի CodePen-ում HTML, CSS և JavaScript ստեղծումից, կան ևս մի քանի բան, որոնք առանձնացնում են այն:
- Ձեր կոդը իրական ժամանակում դիտելը հնարավոր է: Այն չի պահանջում կոմպիլացիա։
- Փորձերը թույլ են տալիս սովորել նոր բաներ:
- Ստեղծեք փոքրիկ փորձարկման դեպքեր՝ խնդիրներ փնտրելու և լուծելու համար:
- Ցուցադրեք ձեր հրաշալի աշխատանքները։
- Ստեղծեք և պահեք Գրիչներ հետագա օգտագործման համար:
- Փորձեք այլ մշակողների կոդը և տեսեք այն գործողության մեջ:
Առավելությունները
- Սկսելու համար, ծախս չկա:
- Ներկառուցված ուսումնական ռեսուրսներ:
- Համագործակցեք ուրիշների հետ և համեմատեք նախագծերը՝ տեսնելու, թե ուր կարող են նրանք գնալ ապագայում:
- UI-ն օգտագործման համար պարզ է և պարզ:
Թերությունները
- Կոդի գրադարանը փոքր է, ավտոմատ կոդերի լրացումը անբավարար է: Այն պարզապես լավ է մեկ էջանոց նախագծերի համար և չի կարող ավելի մեծ բան անել:
- CodePen-ում դուք կարող եք ստեղծել անձնական գրիչներ, սակայն ձեզ հարկավոր է անցնել Pro անդամակցության ($9/ամսական):
ծածկագրի ավազատուփ
CodeSandbox-ը վեբ վրա հիմնված կոդերի խմբագրիչ է: Այն ավտոմատացնում է արտահոսքը, փաթեթավորումը և կախվածության կառավարումը ձեզ համար՝ թույլ տալով ստեղծել նոր նախագիծ մեկ սեղմումով: Հետաքրքրաշարժ բան ստեղծելուց հետո կարող եք այն կիսել ուրիշների հետ՝ պարզապես կիսելով կայքը:
Խմբագիրը համատեղելի է JavaScript-ի ցանկացած նախագծի հետ, չնայած այն ներառում է React-ին հատուկ առանձնահատկություններ, ինչպես օրինակ՝ նախագիծը ստեղծել-react-app ձևանմուշում պահպանելու տարբերակը:
Ցանկացած նախագիծ, որը դուք կառուցում եք CodeSandbox-ում, սկսվում է կաղապարով: Այն կարող է կամ առնչվել որոշակի գրադարանի, շրջանակի կամ գործարկման ժամանակի (ներառյալ Node.js) կամ օգտագործել պարզապես ստանդարտ վեբ տեխնոլոգիաներ: Կաղապար ընտրելուց հետո դուք ուղարկվում եք խմբագրին, որտեղ դուք կգտնեք բոլոր անհրաժեշտ ֆայլերը և նախադիտման պատուհանն արդեն բաց է:
Դուք մուտք ունեք «ֆայլային համակարգ» բոլոր Sandboxes-ում, ինչը նշանակում է, որ դուք կարող եք ստեղծել նոր ֆայլեր, օգտագործել մոդուլներ (ներառյալ NPM փաթեթները) և փոխազդել ստատիկ ակտիվների հետ: Հնարավորություն կա նաև ձևափոխելու կաղապարի հատուկ կազմաձևման ֆայլերը:
Դուք նույնիսկ կարող եք կառուցել ձեր սեփական ձևանմուշները ձեր եզակի օգտագործման դեպքի համար՝ ամբողջական ֆայլի կառուցվածքով և կախվածություններով, ինչպես IDE-ում: Քանի որ գործիքը կապված է Github-ի հետ, դուք կարող եք արագ ստեղծել պարտավորություններ և բացել PR-ներ: Դուք կարող եք անմիջապես տեղադրել ձեր դիմումը ZEIT-ում կամ Netlify-ում:
CodeSandbox Team Pro
CodeSandbox-ը, հոլանդական բիզնեսը, որը ծրագրավորողներին թույլ է տալիս ստեղծել բրաուզերի վրա հիմնված վեբ հավելվածների մշակման ավազատուփ, պաշտոնապես թողարկել է համագործակցության հարթակ, որը թիմերին թույլ է տալիս աշխատել ամպի կոդի վրա: Նոր արտադրանքը՝ Team Pro-ն, առանց կոդերի լուծում է, որը ստեղծվել է արտադրանքի ամբողջական թիմերի համար՝ սկսած դիզայներներից և ղեկավարներից մինչև որակի ապահովման (QA) թիմեր և ավելին:
Նախագծերը տրամադրվում են օգտատիրոջ համար հարմար ինտերֆեյսով բոլորի համար, ովքեր ցանկանում են փոփոխություններ կատարել կամ ընդունել վեբ հավելվածում, խուսափելով այլընտրանքային մեթոդներից, ինչպիսիք են փոփոխությունները կատարելու համար մշակողներին նշումներ և առաջարկություններ ուղարկելը, դրանք քննարկման համար վերադարձնելը և գործընթացը կրկնելը:
ԿԱՐԵՎՈՐ մասեր
- Վեբ վրա հիմնված կոդերի խմբագրիչ և նախատիպ գործիք:
- Տեղական օգտագործման համար ավազարկղը կարելի է հեշտությամբ ներբեռնել zip ֆայլով:
- Ծրագրավորում կատարվում է ավազատուփերում, որոնք հեշտությամբ կարող են կիսվել գործընկերների հետ:
Առավելությունները
- Բարելավված օգտագործողի փորձ և ավելի մեծ վերահսկողություն խմբագրի նկատմամբ:
- Ուղիղ նախադիտման հնարավորությունը կարող է փոփոխվել և դիտվել առանձին պատուհանում:
- Կոդն ավտոմատ ձևաչափվում է և ներառում է CLI (codesandbox-cli)
- Աջակցություն առաջադեմ npm մոդուլներին:
- Գեղեցիկ սխալի հաղորդագրություններ առաջարկություններով:
- Այն բարելավում է վրիպազերծման փորձը՝ ապահովելով ավելի լավ տերմինալ, թեստային դիտող և խնդիրների դիտում:
Թերությունները
- Վերջնական սպառողը ենթարկվում է բազմաթիվ անհատականացումների:
- Քաշեք և թողեք ֆայլերը տեղական համակարգչից ճիշտ չի գործում:
- CodeSandbox-ում պետք է հետևել որոշակի թղթապանակի կառուցվածքին:
- Անձնական ավազատուփի ֆունկցիոնալությունը հասանելի է միայն հաճախորդներին:
StackBlitz- ը
StackBlitz-ը Visual Studio-ի կոդով աշխատող առցանց IDE է վեբ հավելվածների համար: Հարթակը նույնքան արձագանքող և հարմարվող է, որքան աշխատասեղանի տարբերակը: StackBlitz-ը առցանց IDE է, որը գալիս է նախապես բեռնված Անկյունային և արձագանքել զարգացման գործիքներ.
Thinkster.io-ն կառուցեց այդ ֆանտաստիկ նախագիծը, որպեսզի հնարավորինս պարզ դարձնի ձեր Angular կամ React նախագծին սկսելը՝ առանց կախվածության տեղադրման կամ կառուցման կարգավորումների մասին անհանգստանալու: StackBlitz-ը տրամադրում է շատ զարմանալի և եզակի հնարավորություններ, որոնք ոչ մի առցանց կոդերի խմբագրիչ չունի այս պահին: Արդյունքում, արժե ավելի մանրամասն ուսումնասիրել StackBlitz-ը և բացահայտել, թե ինչ է առաջարկում այս առցանց IDE-ն:
Stackblitz-ը չափազանց համեմատելի է ամբողջական IDE-ի հետ, հատկապես, եթե դուք չեք կարող հրաժեշտ տալ VS կոդը, քանի որ գործիքը հիմնված է դրա վրա: Փաթեթն ունի մի շարք առանձնահատկություններ, որոնք թույլ են տալիս սկսել և շարունակել ստեղծել ամբողջական փաթեթային հավելված:
Ծրագիրը սնուցվում է Visual Studio-ի կողմից, որը հայտնի է մշակողների շրջանում: Անցանց խմբագրումը նախագծի առանձնահատուկ առանձնահատկությունն է: Դա հնարավոր դարձնելու համար Stackblitz թիմը ստեղծեց զննարկիչի վեբսերվեր: Երբ դուք մուտքագրում եք, այն ավտոմատ կերպով տեղադրում է կախվածություններ, հավաքում, փաթեթավորում և կատարում տաք վերաբեռնում:
Պրեմիում տարբերակ
Կադետը, տիեզերագնացը և հրամանատարը հասանելի են անվճար՝ համապատասխանաբար 8 դոլար/ամսական և 29 դոլար/ամսական: Astronaut and Commander-ը ներառում է մի շարք առանձնահատկություններ, ինչպիսիք են անսահմանափակ մասնավոր նախագծերը, անսահմանափակ ֆայլերի վերբեռնումները, հրավիրել հիմնական թիմի անգործության ալիք և այլն: Լրացուցիչ տեղեկությունների համար տե՛ս պաշտոնական հաշվարկային խորհուրդը:
ԿԱՐԵՎՈՐ մասեր
- NPM փաթեթների ավելացում ձեր նախագծին:
- Բրաուզերի մշակողի նոր սերվերի շնորհիվ դուք կարող եք խմբագրել անցանց ռեժիմում:
- Հյուրընկալված հավելվածի URL, որը թույլ է տալիս մեզ ցանկացած պահի մուտք գործել (և կիսվել) մեր կենդանի հավելվածով:
- Visual Studio Code-ի այլ ուշագրավ հատկանիշներն են՝ Intellisense, Project Search (Cmd/Ctrl+P), Go to Definition և այլն:
Առավելությունները
- Firebase-ի տեղակայման հնարավորությունները:
- Խմբագիրն իսկապես հեշտ է օգտագործել և չափազանց արագ:
- Օգտատերերին հասանելի են package.json, index.html և index.js:
- Համօգտագործվող կոդ, որը կարող է նաև ներկառուցվել:
- Ուղիղ նախադիտում էջի մեծ հատվածում՝ անհրաժեշտության դեպքում մեկ այլ էջ բացելու հնարավորությամբ:
- Անցանց ռեժիմում, խմբագրում
- Խելացի լրացումներ և բարելավված Intellisense:
- Stackblitz-ի կորիզն է բաց աղբյուր.
Թերությունները
- Դուք ազդեցություն չունեք շենքի կամ մշակողի սերվերի վրա, քանի որ դրանք կառավարվում են create-react-app հրամանով:
- React-ում պետք է դիտարկել թղթապանակի հիմնարար կառուցվածքը:
- Կոդը ավտոմատ կերպով ֆորմատավորել հնարավոր չէ, թեև դա հնարավոր է ձեռքով անել։
Եզրափակում
Մեր օրերում կոդավորման խաղահրապարակը, ինչպիսին մենք տեսանք վերևում, կարող է օգտագործվել ցանկացած վեբ նախագիծ ամբողջությամբ կառուցելու համար: Կարիք չկա ձեր համակարգչի վրա տեղադրել ծանր IDE-ներ, երբ դուք կարող եք ստեղծել, կարգաբերել, փորձարկել և տեղադրել անմիջապես ձեր վեբ բրաուզերից:
Իմ կարծիքով, StackBlitz-ը լավագույնը կլինի դրանցից, քանի որ այն վեբ վրա հիմնված IDE է, որը թույլ է տալիս JavaScript, Angular և այլ զարգացման նախագծեր անմիջապես առանց որևէ տեղական զարգացման միջավայրի տեղադրման, ինչպիսիք են Node.js, npm, կամ Անկյունային: Այն ապահովում է նույն փորձը, ինչ տեղական Visual Studio Code-ի օգտագործումը: Իրականում, քանի որ StackBlitz-ը ղեկավարվում է Visual Studio Code-ով, այն նույնքան արագ և բազմակողմանի է թվում, որքան աշխատասեղանի տարբերակը:
CodePen-ից, CodeSandbox-ից և StackBlitz-ից ո՞րն է ձեր հիմնական գործիքը: Տեղեկացրեք մեզ մեկնաբանություններում:
Աբբաթյա
Շնորհակալություն այս հիանալի հոդվածի համար, երբ տեսա stackblitz.com-ը, ես գիտեմ, որ սա այն է, ինչ ուզում եմ: