Ganduri despre migrarea la TypeScript

Voi intra in motivul si cum migrarea unei baze de cod JavaScript mari la TypeScript. Echipa noastra a incheiat o calatorie lunga de cincisprezece luni de renovare a stivei noastre front-end. Pentru a creste dificultatea, a trebuit sa facem acest lucru in paralel cu livrarea de noi caracteristici clientilor nostri. La final, voi vorbi, de asemenea, daca a meritat sau nu efortul si cum a afectat dezvoltarea noastra.

Hootsuite Analytics este o aplicatie cu o singura pagina construita de la inceput in JavaScript. Ne bazam pe biblioteca React, a carei adoptare a fost foarte timpurie. La un nivel foarte ridicat, aplicatia noastra consuma date din setul nostru de API-uri backend. Apoi transforma acele date in mai multe tipuri de vizualizari. Redam tabele bogate care afiseaza postari pe retele sociale, diagrame, grafice, harti si multe altele.

De-a lungul timpului, aplicatia noastra a crescut destul de mult si acum sta undeva la 150 de mii de linii de cod. omegle porno La Hootsuite investim mult in aspectele tehnice ale produselor noastre. Facem acest lucru evaluand intotdeauna daca ceea ce facem este solid din punct de vedere tehnic. Orice proiect major trebuie sa porneasca de la o definitie a problemei, asa ca hai sa vorbim despre care au fost provocarile noastre tehnice.

JavaScript este un limbaj dificil de modelat a transformarilor de date. Este un limbaj dinamic si, fara a intra prea mult in specificul a ceea ce inseamna asta, necesita dezvoltatorilor sa faca un compromis. Nu este nevoie sa precizeze cum arata datele inainte de a fi utilizate, ceea ce face ca dezvoltarea initiala sa fie foarte rapida. Partea inversa este ca, pe masura ce un proiect creste atat in ​​linii de cod, cat si in numarul de colaboratori, devine exponential mai dificil sa se argumenteze fluxul de date in diferitele straturi ale aplicatiei.

Aceasta problema este oarecum agravata prin utilizarea React. Deoarece este construit pe principii de programare functionale, cum ar fi imuabilitatea si compozitia peste mostenire, incurajeaza dezvoltatorii sa trateze componentele ca functii mici, reutilizabile. Intr-o aplicatie medie sau mare, este tipic sa aveti sute, mii (sau chiar zeci de mii) de componente. le porno Datele pot circula prin zeci de componente simultan.

Imaginati-va ca trebuie sa cititi printr-un copac de o duzina de componente React fara informatii despre cum arata datele la fiecare pas. Asa ne-a aratat lumea in 2015. Acum, dupa cum vor arata cititorii intelepti, React ofera o caracteristica care va ajuta in acest sens: PropTypes. Dar sunt optionale si destul de greu de intretinut. Nu le-am folosit de la inceput, le-am adoptat un an mai tarziu si am inceput sa le adaugam la noi componente. Din experienta noastra, ei nu au furnizat suficiente informatii pentru a echilibra efortul de intretinere necesar. Exista, de asemenea, preocupari mai practice: majoritatea IDE-urilor nu incearca sa analizeze PropTypes pentru a oferi sugestii, aveti nevoie de instrumente pentru a le asigura corectitudinea si este un sistem de tip limitat, nu suficient de robust pentru nevoile noastre.

O alta problema pe care am intampinat-o a fost ca, din cauza lipsei de informatii despre fluxul de date, a fost dificil sa se efectueze refactorizarea de baza. Mutarea fisierelor, impartirea componentelor mari in altele mai mici sau redenumirea fisierelor – aceste operatii au fost atat consumatoare de timp, cat si riscante. porno escort Echipa noastra a acceptat testarea unitatilor inca de la inceput, asa ca nu am putut sa ne blocam aplicatia prin mutarea fisierelor. Dar a consumat mult timp.

Acest lucru a dus la o realizare interesanta: dezvoltatorii rareori refactorizeaza codul, cu exceptia cazului in care este ieftin si sigur sa o faca. Realitatea a fost ca baza noastra de coduri se afla intr-o stare de datorii tehnice cumplite. Dezvoltatorii au avut grija sa faca schimbari majore de teama sa nu rupa functionalitatea sau sa petreaca prea mult timp pe ceea ce au crezut initial ca sunt sarcini de baza.

Lipsa completarii codului si a sugestiilor contextuale a fost a treia si cea mai enervanta problema dintre toate. Eu si cativa membri ai echipei noastre provin dintr-un mediu de dezvoltare back-end, care lucreaza cu limbaje puternic tastate, cum ar fi Java sau C ++. Imi amintesc inca de prima data cand am scris cod JavaScript intr-un IDE. In timp ce lucram, nu mi-am putut gandi decat la .. sophie davant porno .

Uau, scrierea codului fara sugestii IDE este greu!

Te obisnuiesti dupa ceva timp, dar, dupa parerea mea, nu vei fi niciodata la fel de productiv ca in limbile tastate. Se intampla prea multe in orice moment dintr-un program JavaScript. Exista prea multe posibilitati, datele pot avea orice forma si pot muta in orice moment fara avertisment.

Asadar, pentru a rezuma, ne-am confruntat cu trei provocari majore:

• Dificultate in urmarirea fluxului de date
• Refactorizare scumpa
• Lipsa informatiilor contextuale in IDE

Am decis sa incepem cautarea unei solutii si ne-am dat seama ca trebuie sa iesim in afara limitelor ecosistemului JavaScript pentru a gasi una. Am aruncat o privire asupra a ceea ce oferea comunitatea open-source ca optiuni pentru dezvoltarea front-end. Este un moment uimitor pentru a construi aplicatii web, deoarece exista multe, multe optiuni dincolo de JavaScript.

Am avut o restrictie foarte critica. Hootsuite este o afacere, milioane de clienti din intreaga lume depind de noi, asa ca nu am putut opri dezvoltarea in timp ce ne-am migrat codul in alta limba. Migratia trebuia sa fie treptata. porno bizarre Am scrie un cod nou in noua noastra limba, in timp ce rescriem incet codul mai vechi, fara a interfera cu foaia de parcurs a produsului pe care a trebuit sa o livram. Asa ca am facut o lista scurta de optiuni si le-am dezbatut una cate una.

Una dintre primele limbi la care ne-am uitat a fost Elm. Bogdan Zaharia, membru al echipei noastre, este un sustinator urias al programarii functionale in cea mai pura forma. El a fost cel care a introdus acest limbaj echipei noastre. Elm a fost inspirat de Haskell si ofera o alternativa robusta, tastata la JavaScript. Desi atragatori, nu am putut trece cu usurinta la aceasta. Nu am putut gasi o modalitate simpla de a adopta treptat Elm in baza noastra de coduri. In plus, nu este foarte potrivit pentru incepatori. Este necesar ca dezvoltatorii sa inteleaga cateva concepte non-banale din lumea programarii functionale. little porno De asemenea, a trebuit sa ne gandim cat de usor ar fi sa incorporam noi dezvoltatori din echipa noastra pentru Elm. Dupa ce am cantarit toate aceste dezavantaje, am decis sa continuam sa cautam.

Alte optiuni pe care le-am analizat:

• Dart: acest limbaj devine din nou popular datorita investitiilor Google in Fuchsia. Dart este stiva sa tehnologica UI de facto. Lipsa unei foi de parcurs transparente si a unui viitor incert au insemnat o oprire foarte clara.
• PureScript: acesta este Haskell pentru dezvoltare front-end. Aceleasi argumente ca si utilizarea Elm. Pentru a fi sincer, are o curba de invatare chiar mai abrupta decat Elm.

Mai aveam doi candidati pe lista noastra: Flow si TypeScript .

Nu a fost usor sa alegem intre acesti doi, avand in vedere asemanarile lor. porno le coq Am investit ceva timp in varfuri de cercetare pentru a vedea in primul rand cum arata dezvoltarea in ambele cazuri. Ceea ce am constatat a fost ca Flow a fost mai dificil de configurat decat TypeScript si ca experienta dezvoltatorului a fost lenta. Totusi, acest lucru s-a imbunatatit in ultimul an, asa ca daca ar fi sa le analizam din nou astazi, acest lucru nu ar fi facut o diferenta atat de mare.

Ambele sisteme de tip sunt solide, dar foarte diferite. TypeScript utilizeaza un sistem de tip structural . Flow“ s sistem este atat structural si nominala. Diferenta este esentiala pentru modul in care se integreaza cu ecosistemul JavaScript mai mare. Voi rezuma ce inseamna asta, dar daca sunteti interesat, acest articol va intra in profunzime. Un sistem de tip nominal implica doua tipuri, Foo si Bar, nu sunt niciodata egale, indiferent de definitiile lor. TypeScript, folosind doar alternativa structurala, nu-i pasa cum se numesc tipurile. porno thai Analizeaza structura lor si determina daca ar trebui sa actioneze ca si cum ar fi egali. In practica, acest lucru inseamna ca scrierea codului este mai putin solicitanta pentru dvs. Puteti reutiliza cu usurinta tipurile si interfetele si le puteti chiar defini in linie fara a le denumi.

De asemenea, ne-am uitat la comunitatile din jurul acestor doua proiecte. Flow este un limbaj care, in urma cu cel putin un an, cand am efectuat aceasta analiza, a fost condus de Facebook intr-un mod foarte inchis. Dezvoltarea nu a fost niciodata transparenta, nu a existat o foaie de parcurs publica si foarte putini oameni din afara Facebook au contribuit la proiect. In schimb, TypeScript a imbratisat dezvoltarea open-source de cand s-a mutat in GitHub acum cativa ani. Pastreaza o foaie de parcurs actualizata, accepta contributii externe si, in general, pastreaza o relatie foarte stransa cu comunitatea. Anders Hejlsberg, un coleg Microsoft si arhitect sef, vorbeste la conferinte (cum ar fi TSConf) pe tot parcursul anului, tinandu-i pe toti la curent cu privire la caracteristicile care urmeaza si la performanta proiectului.

Asa cum ati fi ghicit, am ales sa mergem cu TypeScript. tiffany leiddi porno Aceasta a fost o introducere destul de lunga de ce am facut-o, dar serveste ca un sablon bun pentru alte echipe atunci cand se decide sa schimbe stivele de tehnologie. Am vazut prea multe echipe care fac schimbari tehnice incepand cu „cum”, mai degraba decat cu „de ce”. In loc sa declarati ca echipa dvs. doreste sa treaca la o alta limba (sau stiva), incepeti prin a va intelege problemele.

1. Care sunt dificultatile noastre actuale?
2. Cum le acordam prioritate?
3. Sunt rezolvabile in stiva actuala?

Ar trebui sa parcurgeti intotdeauna acesti pasi, astfel incat sa puteti ajunge la cea mai buna solutie posibila.

In acest moment am ajuns la un consens ca dorim sa incepem sa rescriem baza de coduri in TypeScript. Primul pas pe care l-am facut a fost sa ne asiguram ca putem scrie de fapt codul TypeScript.

Am construit Hootsuite Analytics pe baza practicilor software moderne. Avem o conducta de integrare continua care ne ajuta sa livram codul la productie numai dupa ce modificarile trec mai multe verificari:

• Linting
• Formatare (folosind Prettier)
• Teste unitare
• Acoperirea codului
• Teste de acceptare

Avem trei medii diferite: dezvoltare, organizare si, desigur, productie. Cand ne gandeam sa adaugam TypeScript, a trebuit sa ne asiguram ca nu interfereaza cu conducta. porno amateur mature Si, de asemenea, a trebuit sa o facem perfecta pentru dezvoltatori.

Nu voi intra prea mult in detaliile tehnice specifice despre modul in care am integrat TypeScript in baza noastra de coduri. Exista mult prea multe articole si tutoriale excelente care descriu procesul mai bine decat pot si va sugerez sa le verificati:

• https://www.
  
  
  
  
  • porno brigitte lahaie
  • public agent porno
  • video porno ado
  • tournage film porno
  • hijab porno
  • porno hot
  • porno doux
  • perfect porno
  • young porno
  • porno avec des animaux
  • porno marc dorcel
  • travesti porno
  • porno bande
  • porno drole
  • roman photo porno
  • xxl porno gratuit
  • rose valerie porno
  • 300 porno
  • porno militaire
  • video porno gay mature

  
  
  
  
  typescriptlang.org/docs/handbook/migrating-from-javascript.html

• https://medium.com/pleo/migrating-a-babel-project-to-typescript-af6cd0b451f4
• https://medium.com/@clayallsopp/incrementally-migrating-javascript-to-typescript-565020e49c88

Cu toate acestea, voi descrie filozofia noastra, punctele noastre de durere si ceea ce am invatat pe parcurs.

Una dintre cele mai importante decizii pe care le-am luat la inceput a fost aplicarea modului strict . Modul strict este o combinatie de mai multe stegulete ale compilatorului care, atunci cand este activat, efectueaza verificari suplimentare de siguranta de tip asupra codului dvs. porno cunilingus As recomanda oricarei echipe care incepe un proiect TypeScript sa utilizeze modul strict din start. Mutarea codului scris in mod non-strict in modul strict este de fapt foarte dificila si va veti economisi timp pe termen lung activand acest mod devreme.

Unul dintre dezavantajele potentiale ale modului strict este ca nu mai puteti importa cod JavaScript decat daca furnizeaza un fisier de declaratie TypeScript. Daca nu sunteti familiarizat cu acel termen, este ca un antet C / C ++. Trebuie sa scrieti tipuri pentru structurile de date, clase, metode si functii. O multime de proiecte includ fisiere de declaratii scrise de intretinatori. Cu toate acestea, am depins de cativa care nu.

Pentru a rezolva aceasta problema, comunitatea a facut o treaba uimitoare cu depozitul DefinitelyTyped, completand autorii care nu au nici timp, nici interes, nici expertiza pentru a scrie si intretine propriile fisiere de declaratii. Nu am avut probleme la gasirea declaratiilor pentru toate dependentele noastre dupa consultarea acesteia. Din pacate, am intampinat cateva probleme la actualizarea acestora. porno gay grosse bite Din motive mai bine explicate in acest numar GitHub, poate fi dificil sa gasesti combinatia corecta de versiuni. Cu proiecte precum Redux (pe care le folosim si le iubim), exista un intreg ecosistem de proiecte dependente, fiecare cu propriile fisiere de declaratii bazate pe comunitate. De obicei, trebuie sa le actualizati simultan, astfel incat va puteti imagina, poate deveni frustrant.

Pentru a inrautati lucrurile, aplicatia noastra depindea de cateva pachete scrise si gazduite interne si toate erau JavaScript. Prin urmare, importarea lor s-ar rupe in modul strict, asa ca am avut o noua problema pe maini. Am avut doua optiuni: fie sa ignoram erorile compilatorului (folosind @ ts-ignore), fie sa scriem singuri fisierele de declaratie.

Pentru a nu ramane blocat in aceasta problema, am ignorat erorile de import. Ne-am angajat sa ne intoarcem si sa scriem fisierele de declaratie (ceea ce am facut, la timp). As recomanda aceasta abordare si altor echipe, deoarece daca tocmai incepeti cu TypeScript, este greu sa scrieti fisiere de declaratie. In functie de cat de dinamice sunt API-urile dvs. animaux porno , ar putea necesita o cunoastere complexa a sistemului de tip pentru a finaliza. In zilele de adoptare timpurie, cand va aflati la indemana lucrurilor, nu doriti sa fiti imprastiat prea subtire.

O alta provocare pe care am avut-o a fost scamarea. In timpul cercetarii noastre am gasit doua moduri de a linting codul TypeScript: TSlint, un instrument dezvoltat intern la Palantir si ulterior open-source si ESlint, instrumentul de linting de facto pentru JavaScript, impreuna cu typescript-eslint-parser.

Foloseam deja ESLint in conducta, asa ca solutia noastra a fost sa adoptam o configurare duala a ESlint pentru a verifica codul JavaScript si TSlint pentru noul cod. Acest lucru s-a simtit chiar la momentul respectiv, de cand ne-am gandit sa folosim cele mai bune instrumente pentru job, dar a adus multe dezavantaje. A trebuit sa mentinem doua fisiere de configurare linting, doua liste de reguli, aveam mai multe dependente de care aveam nevoie sa urmarim si aveam doua iesiri diferite de linting ori de cate ori existau erori.

Avansam rapid cateva luni, ne-am consolidat pe ESlint pentru verificarea codurilor JavaScript si TypeScript. Am acceptat ca, desi am pierdut unele reguli specifice TSlint mai avansate, nu a meritat efortul de a pastra ambele instrumente in conducta noastra.

Cu instrumentele rezolvate, a trebuit sa decidem cum sa abordam migrarea codului. porno tuga Asa cum am mentionat mai devreme, nu ar exista nicio rescriere imensa, a trebuit sa continuam sa sustinem foaia de parcurs a produsului nostru, ceea ce insemna livrarea caracteristicilor si mentinerea aplicatiei. Am ajuns cu doua reguli care sa ne ghideze munca.

• Codul nou trebuie intotdeauna scris in TypeScript. Fara exceptii.
• Baza de cod va fi tratata ca o structura de date copiere-scriere. Daca sarcina dvs. necesita schimbarea codului JavaScript, trebuie sa il rescrieti.

Dupa cum va puteti imagina, acest lucru nu a mers intotdeauna bine. In timp ce scrierea unui cod nou a fost distractiv in TypeScript, importarea codului vechi a ramas o problema. Primele noastre solicitari de extragere au fost neobisnuit de mari si, prin urmare, au fost dificil de evaluat de catre colegi. porno asmr Am incercat sa ajungem la partea de jos a problemei in timpul intalnirilor noastre saptamanale JavaScript Guild. S-a dovedit ca deseori dezvoltatorii trebuiau sa intre in modulele vechi si sa rezolve problemele care tocmai erau descoperite de compilator. Deci, cererile de extragere care ar fi trebuit sa includa unul sau doua fisiere aveau acum dimensiuni de sute sau chiar mii de linii datorita celei de-a doua reguli de migrare.

Inca am vrut sa sustinem viziunea, asa ca am decis sa aruncam o privire asupra principalilor infractori care au provocat schimbarile mari. Acestea erau in mare parte mai vechi componente React sau functii utilitare. Aceste module au fost reutilizate pe intregul proiect, astfel incat modificarile aduse acestora au intrat in cascada pe intreaga baza de cod. In loc sa petrecem timp in avans pentru a le rescrie, ceea ce ar fi putut provoca intarzieri in foaia de parcurs a produsului nostru, am scris fisiere de declaratie pentru acestea. Acest lucru a ajutat foarte mult la reducerea dimensiunii cererilor de extragere ulterioare. Am intarziat rescrierea acestor module pana cand am fost mai departe impreuna cu migrarea.

Daca echipa dvs. perfectgirl porno face acest lucru, avertisment – efectiv adaugati datorii tehnice . Va trebui sa intretineti aceste fisiere, ceea ce nu este simplu. Este foarte usor sa schimbati codul JavaScript fara a actualiza fisierele de declaratie corespunzatoare. Aplicatia dvs. se va compila, dar se va bloca si se va arde in timpul rularii. In practica, am avut foarte rar aceasta problema, datorita acoperirii noastre decente de testare a unitatii. Incercati totusi sa nu pastrati fisierele de declaratie pentru totdeauna si va angajati sa va rescrieti codul la un moment dat.

Desigur, am livrat si cateva erori in productie in timpul rescrierilor. Valoarea uimitoare in sistemele de tip este ca puteti prinde atat de multe erori la compilare in loc de runtime. Totusi, acest lucru nu a fost niciodata cazul nostru inainte de migrare, asa ca am avut o multime de bug-uri persistente care asteptau sa se manifeste conditiile potrivite. porno young

Cea mai buna masura de succes pe care o avem pana acum este numarul de implementari de productie. Ne-am construit conducta in asa fel incat orice cereri de extragere combinate sa declanseze o lansare de productie. Aceasta inseamna ca trimitem zilnic noile versiuni catre clienti. Presupunerea noastra a fost ca, din cauza incertitudinii care ne-a guvernat baza de coduri inainte de migratie, nu ne-am desfasurat niciodata atat de des cat am putut. Si am avut dreptate.

Numarul de lansari in productie s-a dublat fata de 2017.

Nu este niciodata usor sa atribui succesul statistic, asa ca voi elimina suspectii obisnuiti care ar fi putut influenta acest grafic.

Numarul dezvoltatorilor front-end din echipa noastra a ramas in mare parte constant. Asadar, desi exista o oarecare corelatie intre efectiv si cresterea productiei, nu este suficient sa explicam tendinta.

Nu am pus Analytics ca produs in pauza, foaia noastra de parcurs a reprezentat un flux constant de caracteristici, asa ca, de asemenea, este exclus. cap d’agde porno Exista unele influente sezoniere. Ne bucuram de un congelare pasnica a codului in timpul sarbatorilor de Craciun in fiecare an. In acest timp nu putem impinge niciun cod catre productie. Acest lucru explica activitatea redusa la sfarsitul fiecarui an.

Suntem inca la inceputul analizei impactului pe care aceasta migratie l-a avut asupra bazei noastre de cod. Datele cantitative sugereaza ca livram mai des decat oricand. Informatiile calitative sunt, de asemenea, foarte valoroase. Dezvoltatorii nostri adora informatiile contextuale pe care le ofera tipurile (mai ales acum ca toata lumea din echipa foloseste VSCode sau WebStorm). Scriu mai putine teste, deoarece acum sunt descoperite erori in timpul compilarii. In general, sunt mai fericiti de calitatea codului lor. porno petite bite Abordarea de noi dezvoltatori in proiect, care din punct de vedere istoric a fost foarte dificil, este acum mai rapida. Planuim sa mai facem un control in sase luni si sa vedem daca aceste rezultate initiale persista.

Ati crede ca aceasta migratie a afectat foaia de parcurs a produsului nostru, datorita tuturor lucrarilor de refactorizare. Nu a fost cazul nostru. Am reusit sa livram toate proiectele noastre la timp. Avertismentul este ca la Hootsuite nu lucram niciodata sub presiunea unor termene fixe, negociabile. Pot, de asemenea, sa atest faptul ca anumite caracteristici pe care le-am livrat ar fi durat mult mai mult daca ar fi trebuit sa lucram in JavaScript. Parti din baza noastra de coduri se apropie de varsta de patru ani. Noile caracteristici din jurul lor ar fi condus cu siguranta la estimari.

Aceasta migratie nu ar fi fost posibila fara pasiunea, grija, atentia la detalii si munca grea a dezvoltatorilor nostri in biroul Hootsuite din Bucuresti. piscine porno As dori sa le multumesc lui Bogdan Zaharia, Flavius ​​Tirnacop, Gabriel Ilie, Sergiu Buciuc si Sinziana Nicolae pentru ca au mentinut viu visul TypeScript si, in general, pentru un an trecut uimitor. Sunt fericit si mandru ca lucrez la o echipa care poate fi motivata atunci cand se confrunta cu un proiect ca acesta. Asteptam cu nerabdare urmatoarele realizari.

Ati migrat vreodata o baza de cod in alta limba? Impartasiti-va experienta in comentarii si spuneti-ne daca ati gasit util acest articol.