Plănuiți să intrați în dezvoltarea web? Luați un instrument cu voi, e înfricoșător acolo. Să aruncăm o privire la câteva instrumente comune de dezvoltare web care vă vor ajuta să vă accelerați fluxul de lucru și să fiți un dezvoltator web mai bun.

Rețineți că kilometrajul dvs. poate varia foarte mult. Acest articol listează doar cele mai populare soluții disponibile în natură. Încă trebuie să le integrezi în proiectele tale și să afli mai multe despre ele.

Acestea fiind spuse, iată o listă cu cele mai frecvente instrumente / pachete pe care le folosesc în fluxurile mele de lucru în mod regulat.

# 1 Cod VSC?

VSCode nu are nevoie de nicio introducere. Este un editor de cod frumos și puternic care acceptă extensii, terminal integrat, fragmente, teme, comenzi rapide, SSH la distanță și multe altele – în funcție de nevoile dvs.

Funcționând deasupra electronilor, este compatibil cu sistemul de operare și este îmbunătățit în mod constant de Microsoft proiect open source. VSCode vine cu un set bogat de instrumente, IntelliSense prin Language Server Protocol și corecții / corecții rapide pe tot parcursul anului.

Cod VSC

Obțineți VSCode acum de la oficial Site-ul VSCode.

# 2 Webpack?

Webpack se vinde ca un pachet de module, dar în realitate, este mult mai extensibil de atât. Puteți atașa o mulțime de pluginuri și să-i modificați configurația pentru a o face mai robustă și mai potrivită nevoilor dumneavoastră.

Webpack 4 vine ca un pachet de module de configurare zero – asta înseamnă că puteți începe cu Webpack aproape imediat! Trebuie doar să descărcați modulul folosind npm i webpack și apoi fugi npx webpack în directorul dvs. Iată cum să configurați zero configurație cu webpack:

# 3 Cypress?

Cypress este un instrument excelent de testare e2e, care poate face efectiv o fereastră fără cap sau o fereastră completă cromată pentru a rula testele reale ale codului dvs. Poate interacționa cu codul asincron într-un mod foarte intuitiv. De exemplu, așteaptă ca resursele să fie încărcate / disponibile, spre deosebire de Selenium, care este o tehnologie destul de veche făcută pentru testarea automată a site-urilor în mare parte statice. Să vedem cum funcționează Cypress printr-un videoclip rapid:

Testele Cypress sunt foarte simple și ușor de scris și fac toate greutățile din cutie (cum ar fi lansarea unei instanțe cromate, evenimente adecvate de la tastatură, emițătoare de evenimente de încredere, așa se face) Ia chiparos Aici.

# 4 TypeScript?

Scrieți JavaScript simplu? Poate fi cu adevărat dureros să găsești erori subtile și erori fără a scăpa corespunzător. Pentru a-l face și mai puternic, cu o mai bună verificare a tipului și completarea automată a modulelor, luați TypeScript cu dvs.

TypeScript este un superset de JavaScript care se transpune în JavaScript înainte de executare. Acest lucru înseamnă că obțineți JavaScript care rulează la fel ca înainte, dar cu avantajul suplimentar de dezvoltare al codificării JS într-o manieră „mai strictă”.

Nu ar fi greșit să spunem că TypeScript permite într-adevăr întreținerea utilă a codului JavaScript și face refactorizarea simplă. Puteți începe să învățați TypeScript prin intermediul lor documente oficiale.

# 5 Sentinelă?

Sentry este un serviciu de raportare a erorilor pentru producție. De multe ori, în special în partea frontală, utilizatorii dvs. se pot confrunta cu blocări sau erori neașteptate.

Personal folosesc Sentry pentru codedamn, și am remediat câteva bug-uri urâte și cauze ale blocărilor care erau rare și se întâmplaseră utilizatorilor foarte anumiți în timpul acțiunilor foarte specifice întreprinse pe platformă.

Ca bonus, Sentry există pe o mulțime de platforme și nu este limitat doar la timpii de rulare JavaScript. Acest lucru înseamnă că Sentry poate fi folosit cu majoritatea oricărui stack tehnologic popular.

Sentry trimite urmărirea completă a stivei / informații despre bug direct în tabloul de bord, astfel încât să puteți remedia acel bug urât în ​​următorul ciclu de lansare. Citește despre santinela aici.

# 6 Git?

Git este bagheta magică a oricărui proiect mare. Git este un sistem de control al versiunilor (VCS) care vă permite să vă construiți software-ul în mod incremental, menținând în același timp o diferență completă a versiunilor anterioare. Aceasta înseamnă că nu pierdeți niciun istoric și puteți reveni cu ușurință la ultimul punct de lucru.

Nu numai acest lucru, vă puteți ramifica și lucra la ceva complet diferit, fără a afecta efectiv proiectul original. Acest concept se numește ramuri în git. Există multe mai multe despre git pe care le puteți învăța. Îmi place această serie din thenewboston pe git. Uită-te:

https://www.youtube.com/watch?v=videoseries

Cea mai populară soluție pentru găzduirea git repos este GitHub. Oferă depozite publice și private gratuite. Puteți afla mai multe despre git Aici.

# 7 Babel?

Babel vă permite să scrieți caracteristici JavaScript de sângerare, dar apoi să le transpuneți în browsere într-un standard pe care browserele îl cunosc și l-au implementat de-a lungul timpului.

Utilizarea babel cu webpack este o combinație foarte puternică care vă permite să utilizați caracteristici de ultimă oră și apoi să le combinați / să le reduceți. Aceasta oferă cea mai bună experiență pentru dezvoltatori atunci când dezvoltă aplicații, precum și pentru servirea versiunilor minimizate pentru utilizatori pentru viteză și performanță.

De exemplu, puteți scrie codul ES2020 în babel și lăsați-l să îl transpună în versiunea ES2015 pentru a fi expediat browserelor. Scrie JavaScript cu adevărat distractiv și convenabil, deoarece vă permite să utilizați JavaScript din viitor! Aflați despre babel Aici.

# 8 UI material ⭐️

UI material este o specificație de la Google cu privire la modul în care ar trebui create aspectele. În plus față de interfața de utilizare a materialelor, există o mulțime de biblioteci de componente disponibile pentru o serie de cadre precum Angular, React sau React Native. Unele biblioteci de componente includ:

  1. UI material – React
  2. React Hârtie nativă
  3. Vuetify
  4. Materiale unghiulare

Acest lucru ușurează procesul de a construi o mulțime de componente manual pentru dezvoltatori. Și, în același timp, le oferă componente rapide și bine proiectate. Aflați despre UI material Aici.

# 9 Joi?

Validarea datelor este o parte importantă a oricărei aplicații. Acest lucru se datorează faptului că nu puteți avea niciodată încredere în datele provenite de la un utilizator. Pentru aplicații pe scară largă cu mai multe puncte finale pentru a ajunge la serverul backend, poate deveni foarte dificil să gestionați toate cazurile marginale.

Joi este o bibliotecă foarte utilă, care vă ajută să validați toate datele primite printr-o schemă strictă predefinită. Joi vă permite să construiți scheme pentru tablouri, obiecte și chiar valorile pe care ar trebui să le accepte.

Dacă intrarea eșuează, vă permite, de asemenea, să personalizați mesajele de eroare. Gata cu hassles de obj && typeof obj === 'string' în codul tău! Utilizarea schemei Joi nu este doar sigură, ci face și codul dvs. mult mai lizibil pentru alți dezvoltatori. Aflați mai multe despre Joi Aici.

# 10 Docker?

Configurarea stației de andocare pentru dezvoltare vine cu propriul set de provocări (vorbind din experiență). Dar, odată realizat, merită investiția. Parțial pentru că eliminați erorile „it-works-on-my-machine”.

Dar, de asemenea, rularea codului sandbox are un alt avantaj. În nefericitul caz în care aplicația dvs. web este piratată sau doborâtă, containerul de andocare se va asigura că atacul este conținut doar către acel container și că nu este afectat niciun alt serviciu (cu excepția cazului în care, bineînțeles, containerul dvs. are reguli de securitate inferioare).

Puteți începe astăzi cu Docker! Începeți cu această listă de redare:

https://www.youtube.com/watch?v=videoseries

Concluzie

Web-ul este vast și, dacă tocmai începeți, poate fi copleșitor să începeți! Obțineți ajutor de la colegi dezvoltatori care v-au fost în locul. Puteți chiar să ajungeți la mine mai departe stare de nervozitate / instagram și conectați-vă. Voi fi bucuros să vă ajut.

Doriți să învățați dezvoltarea web și alte limbaje de programare într-un mod complet nou? Mergeți spre o o nouă platformă pentru dezvoltatori Lucrez la încercarea de azi!