Proiektu konplexu batean lan egiten baduzu, programatzaile esperientziaduna edo lehen ikaslea izan, ia arazoekin topo egingo duzu. Zure proiektua modulu askotan zatitzen duzunean, arazoak sortzen dira, eta zailagoa da akatsen jarraipena eta irtenbideak aurkitzea. Beste kasu batzuetan, instantzia indibidualak araztea zaila izan daiteke, lantzen ari zaren arazoari irtenbide egokia aurkitu ez duzulako.
Kode zati gisa ere gertatzen da noizean behin, eta horrek konplexua izan dezake garai hartan. JavaScript Webean oinarritutako hizkuntzetako bat da, ikasteko oso erraza dena. Abiarazi zure mahaigaineko arakatzailea eta nabigatu Garatzaileen tresnetara (normalean F12) eta listo! Ondoren, JSrekin esperimentatu dezakezu software konplikaturik instalatu edo exekutatu beharrik gabe.
Hasteko, behar duzun guztia arakatzailea da. Zoragarria da sinpletasun hori guztia kutxatik ateratzea, baina gehiago behar dituzun kasuetan. Adibidez, demagun duela gutxi aurkitu duzun Web API berri batekin esperimentatu nahi duzula baina ez duzula proiektu berririk hasi nahi.
Argitalpen honetan, hiru JS jolastoki ezagunenak, CodePen, CodeSandbox eta StackBlitz konparatu eta kontrastatuko ditugu. Has gaitezen!
CodePen
Frontend web garapen-tresnak beti garatzen ari dira, eta testu-editoreak garatzaileen bizitza errazten duten azken teknologien osagai handi bat dira. Atom edo Notepad ++ bezalako testu editore autonomoez gain, azken urteotan nabigatzailean oinarritutako editoreen eztanda egon da, programak instalatu behar ez dituztenak eta lankidetza handiagoa sustatzen dutenak.
CodePen "erabiltzaileek sortutako HTML, CSS eta JavaScript kode zatiak probatzeko eta aurkezteko lineako komunitatea" da, eta aukera bikainak eskaintzen ditu frontend web orriak hobeto nola idazten ikasteko.
CodePen-ek bi "modu" ematen dizkizu. Lehenengoa eta erabiliena Luma da. Botoi bat sakatzea eta editorera zuzenean garraiatzea bezain erraza da. Hortik aurrera, aurrebista panel batera sar zaitezke, baita oinarrizko HTML, CSS eta JS editatzeko leihoetara ere.
Ez dago "fitxategi-sistema", "IntelliSense" edo beste ezer - sintaxi nabarmentze sinplea eta prettify bezalako komando azkarrak besterik ez. Aukeren fitxan, hiru hizkuntzetarako aurreprozesadore sorta mugatu batetik hauta dezakezu (adibidez, TypeScript JSrako) edo kanpoko iturrietarako konexioak gehi ditzakezu.
Doan bakarrik egin behar baduzu, edozein editorerekin nahikoa izango da. CodePen iradokiko nuke konfigurazio edo liburutegi asko behar ez duen edozertarako: HTML, CSS eta JS besterik gabe, goian aukerako aurreprozesadoreekin. Jolastokia zure sare sozialen presentzia hobetzeko edo zorro pertsonal bat garatzeko erabili nahi baduzu, CodePen aukera hobea da.
Premium bertsioa
Alternatiba gehiago dituzu CodePen-en aukeratzeko. Urtero ordaintzen baduzu, hiru premium planetako bat lor dezakezu 12 $, 19 $ edo 39 $ hilero. Hiru mailetako edozeinetan boligrafo, argitalpen eta bilduma pribatu infinitu sor ditzakezu.
Gainera, Pro bereizgarria (sustura soziala), zuzeneko lankidetza modurako sarbidea, publizitaterik gabe eta abar jasoko duzu. Taldearen estrategia espezifikoak eta maila ezberdinetako beste bereizketa batzuk ere badaude. Ikusi haien fakturazio-taula ofiziala informazio gehiago lortzeko.
Key Ezaugarriak
CodePen-en HTML, CSS eta JavaScript sortzeaz gain, beste gauza batzuk bereizten dituzte.
- Zure kodea denbora errealean ikustea posible da. Ez du konpilaziorik behar.
- Esperimentatzeak gauza berriak ikasteko aukera ematen du.
- Sortu proba kasu txikiak arazoak bilatzeko eta konpontzeko.
- Erakutsi zure lan zoragarriak.
- Sortu eta gorde boligrafoak gero erabiltzeko.
- Probatu beste garatzaileen kodea eta ikusi ekintzan.
Abantailak
- Hasteko, ez dago kosturik.
- Ikasteko baliabide integratuak.
- Besteekin elkarlanean aritu eta proiektuak alderatu etorkizunean nora joan daitezkeen ikusteko.
- Interfazea erabiltzeko erraza eta zuzena da.
Desabantailak
- Kode liburutegia txikia da, kode automatikoa osatzea desegokia da. Orrialde bateko proiektuetarako oso ona da eta ezin du ezer handiagorik kudeatu.
- CodePen-en, boligrafo pribatuak sor ditzakezu, baina Pro-ko kidetasun batera igo beharko duzu (9 $ hilean).
kodea sandbox
CodeSandbox web-oinarritutako kode-editorea da. Transpirazioa, ontziratzea eta mendekotasunen kudeaketa automatizatzen dizu, proiektu berri bat klik bakar batekin eraikitzeko aukera emanez. Zerbait liluragarria sortu ondoren, beste batzuekin parteka dezakezu webgunea partekatu besterik gabe.
Editorea JavaScript edozein proiekturekin bateragarria da, nahiz eta React-en ezaugarri espezifiko batzuk biltzen dituen, hala nola, proiektua create-react-app txantiloi batean gordetzeko aukera.
CodeSandbox-en eraikitzen duzun edozein proiektu txantiloi batekin hasten da. Liburutegi, esparru edo exekuzio-denbora zehatz batekin erlazionatu daiteke (Node.js barne) edo web-teknologia estandarrak erabil ditzake. Txantiloi bat hautatu ondoren, editorera bidaliko zara, eta bertan beharrezko fitxategi guztiak eta aurrebista-leihoa irekita aurkituko dituzu.
Sandbox guztietan "fitxategi-sistema" baterako sarbidea duzu, hau da, fitxategi berriak sor ditzakezu, moduluak erabili (NPM paketeak barne) eta aktibo estatikoekin elkarreragin dezakezu. Txantiloiaren berariazko konfigurazio fitxategiak aldatzeko aukera ere badago.
Zure erabilera-kasu berezirako zure txantiloiak ere eraiki ditzakezu, fitxategien egitura eta mendekotasunekin osatuta, IDE batean bezala. Tresna Github-ekin lotuta dagoenez, azkar sor ditzakezu konpromisoak eta PR-ak ireki. Zure aplikazioa berehala inplementa dezakezu ZEIT edo Netlify-n.
CodeSandbox Team Pro
CodeSandbox-ek, garatzaileei arakatzailean oinarritutako web aplikazioak garatzeko sandbox bat eraikitzeko aukera ematen dien Holandako negozioak, taldeei hodeian kodean lan egiteko aukera ematen dien lankidetza-plataforma bat kaleratu du ofizialki. Produktu berria, Team Pro, produktu-talde osoentzat eraikitako koderik gabeko irtenbide bat da, diseinatzaile eta kudeatzaileetatik hasita, kalitatea bermatzeko (QA) taldeetatik eta haratago.
Proiektuak web-aplikazio batean aldaketak egin edo onartu nahi dituen edonorentzat erabilerraza den interfaze batean eskaintzen dira, metodo alternatiboak saihestuz, hala nola, oharrak eta gomendioak bidaltzea garatzaileei aldaketak gauzatzeko, eztabaidarako itzultzeko eta prozesua errepikatuz.
Key Ezaugarriak
- Webean oinarritutako kode-editorea eta prototipo-tresna.
- Tokiko erabilerarako, sandbox bat erraz deskargatu daiteke zip fitxategi batean.
- Programazioa sandboxetan egiten da, lankideekin erraz parteka daitezkeenak.
Abantailak
- Erabiltzaileen esperientzia hobetua eta editorearen gaineko kontrol handiagoa.
- Zuzeneko aurrebistaren funtzioa beste leiho batean alda daiteke eta ikus daiteke.
- Kodea automatikoki formateatzen da eta CLI bat (codesandbox-cli) barne hartzen du.
- npm modulu aurreratuen laguntza.
- Errore mezu politak gomendioekin.
- Arazketa-esperientzia hobetzen du terminal, proba-ikustaile eta arazo-ikustaile hobeak eskainiz.
Desabantailak
- Azken kontsumitzaileak pertsonalizazio asko jasaten ditu.
- Tokiko ordenagailu batetik fitxategiak arrastatu eta jaregin ez dira behar bezala funtzionatzen.
- Karpeta-egitura jakin bat jarraitu behar da CodeSandbox-en.
- Sandbox pribatu baten funtzionaltasuna babesleentzat bakarrik dago eskuragarri.
StackBlitz
StackBlitz Web aplikazioetarako Visual Studio Code-k bultzatutako lineako IDE bat da. Plataforma mahaigaineko bertsioa bezain sentikorra eta moldagarria da. StackBlitz lineako IDE bat da, aurrez kargatuta datorrena Angelua eta Erreakzioa garapen tresnak.
Thinkster.io-k proiektu zoragarri hori eraiki zuen zure Angular edo React proiektuarekin hastea ahalik eta errazena izan dadin, menpekotasunen instalazioaz edo eraikitze ezarpenez kezkatu beharrik gabe. StackBlitz-ek oraingoz lineako beste kode editore batek ez dituen ezaugarri harrigarri eta paregabe asko eskaintzen ditu. Ondorioz, merezi du StackBlitz gehiago ikertzea eta online IDE honek zer eskaintzen duen ezagutzea.
Stackblitz oso konparagarria da IDE osoarekin, batez ere VS kodeari agur esan ezin badiozu tresna horretan oinarritzen delako. Paketeak pila osoko aplikazio bat sortzen hasteko eta jarraitzeko aukera ematen duten hainbat funtzio ditu.
Programa garatzaileen artean ezaguna den Visual Studio-k bultzatzen du. Lineaz kanpoko edizioa da proiektuaren ezaugarri nabarmena. Hori posible egiteko, Stackblitz taldeak arakatzailearen barneko web zerbitzari bat sortu zuen. Idazten duzun heinean, automatikoki instalatzen ditu mendekotasunak, konpilatzen, sortak eta beroa birkargatzen du.
Premium bertsioa
Cadet, Astronaut eta Commander doan daude eskuragarri, $ 8 / hilean eta $ 29 / hilean, hurrenez hurren. Astronaut and Commander-ek hainbat funtzio biltzen ditu, hala nola proiektu pribatu mugagabeak, fitxategi kargatu mugagabeak, talde nagusiko slack kanalera gonbidatzea, etab. Informazio gehiagorako, ikusi fakturazio-taula ofiziala.
Key Ezaugarriak
- Zure proiektuari NPM paketeak gehitzea.
- Arakatzailean garatzeko zerbitzari berri bati esker, lineaz kanpo edita dezakezu.
- Ostatatutako aplikazioaren URLa, gure zuzeneko aplikazioa edozein unetan sartzeko (eta partekatzeko) aukera ematen diguna.
- Visual Studio Code Code ezaugarri aipagarri batzuk Intellisense, Project Search (Cmd/Ctrl+P), Joan Definition eta beste batzuk dira.
Abantailak
- Firebaseren hedapenerako gaitasunak.
- Editorea erabiltzeko erraza eta oso azkarra da.
- Erabiltzaileek package.json, index.html eta index.js atzitu dituzte.
- Parteka daitekeen iturburu-kodea ere txertatu daitekeena.
- Zuzeneko aurrebista orriaren atal handi batean, behar izanez gero beste orri batean irekitzeko aukerarekin.
- Lineaz kanpo dagoen bitartean, editatzen
- Osaketa adimendunak eta Intellisense hobetua.
- Stackblitz-en muina da kode irekiko.
Desabantailak
- Ez duzu eraginik eraikinean edo garatzaileen zerbitzarian horiek create-react-app komandoak kudeatzen dituelako.
- React-en, oinarrizko karpeta-egitura ikusi behar da.
- Ezin da kodea automatikoki formateatu, nahiz eta eskuz egin daitekeen.
Ondorioa
Gaur egun, goian ikusi ditugunak bezalako kodetze-jolas bat erabil daiteke edozein web proiektu guztiz eraikitzeko. Ez dago zure ordenagailuan IDE astunak instalatu beharrik zure web arakatzailetik zuzenean eraiki, arakatu, probatu eta inplementa dezakezunean.
Nire ustez, StackBlitz izango litzateke onena haien artean, web-oinarritutako IDE bat delako, JavaScript, Angular eta beste garapen-proiektu batzuk lehenbailehen ahalbidetzen dituena, Node.js, npm, bezalako garapen lokaleko ingurunerik instalatu beharrik gabe. edo angeluarra. Visual Studio Code lokalean erabiltzearen esperientzia bera eskaintzen du. Egia esan, StackBlitz Visual Studio Code-k gidatzen duenez, mahaigaineko bertsioa bezain azkarra eta polifazetikoa sentitzen da.
CodePen, CodeSandbox eta StackBlitz-en zein da zure tresna egokiena? Jakin iezaguzu iruzkinetan.
Abbatyya
Eskerrik asko artikulu bikain honengatik, behin stackblitz.com ikusi dudanean, badakit hau dela nahi dudana.