Am discutat cu invitații noștri despre ce înseamnă să fi programator Front End:
Vicențiu Băcioiu - Team Lead Web Community @ Cognizant Softvision ,
Ovidiu Mățan: Vă invit să vă prezentați pe scurt
Vicențiu Băcioiu: Lucrez la Softvision de cinci ani, dar activez în domeniu de nouă ani. Am început cu JavaScript. Nu am schimbat tehnologia principală, dar am încercat și alte tehnologii, de exemplu .NET. Momentan, lucrez foarte mult cu Angular.
Vlad Luca: Lucrez la PitechPlus de șase ani. Inițial am lucrat ca backend developer, în PHP vreo 2-3 ani, iar apoi am avut posibilitatea să lucrez pe un proiect în React. Acum sunt JavaScript developer.
La ce proiecte lucrați acum?
Vlad Luca: Lucrez pe migrarea unei funcționalități monolit spre micro-frontend. Am început acum doi ani. Practic, când am intrat în proiect majoritatea funcționalității de frontend era scrisă în jQuery. S-a decis migrarea spre micro-frontend, deoarece era un code base foarte mare. Acum scriem componentele micro-frontend în React cu TypeScript.
Vicențiu Băcioiu: Lucrez pe un proiect point of sale. Are niște funcționalități de tip CRM extra, dar și integrări cu pluginuri. Tehnologiile principale sunt Angular și .NETCore. Folosim SignalR pentru comunicare pe canale prin notificări. Supraveghez și un proiect pe React cu .NET Core.
Avem foarte multe Single Page Applications. Cum le comparați cu paginile Web standard?
Vicențiu Băcioiu: Orice site ar trebui să aibă un Progrâessive Web App dacă business-ul este de așa natură. La nivel de performanță, dar și pentru utilizatorii cu Internet limitat, Progressive Web App este viitorul.
Vlad Luca: Dispozitivele mobile sunt extrem de întâlnite. Progressive Web App (PWA) aduce o serie de avantaje. Un avantaj ar fi conexiunea de Internet, în sensul în care putem accesa aplicația fără o conexiune la Internet sau având o conexiune limitată. Este esențial ca totul să fie light weight, cu o bandă de 50-100 de kilo. Un alt avantaj este faptul că se poate instala aplicația, similar cu o aplicație nativă, ceea ce face aplicația mai accesibilă. Apoi, avem și partea de push notifications ca într-o aplicație nativă. Putem face o comparație chiar și cu aplicațiile native sau hibride, iar pentru aceste cazuri, unul dintre avantaje este caracterul responsive. Un alt avantaj este faptul că aplicația este mereu la zi, că nu avem nevoie de update-uri. De asemenea, este ușor să partajăm. Pentru comunicarea între server și aplicație putem avea WebSockets pentru real-time updates.
Credeți că vom asista la o îmbinare între paginile web standard și PWA? Momentan, PWA sunt destul de mari.
Vicențiu Băcioiu: Dacă va prinde curentul PWA, dacă le putem monetiza prin business case, atunci vom avea o cerere mai mare.
JavaScript are o latură pe Object Oriented Programming care nu este neapărat foarte folosită? Care este motivul pentru care nu este atât de folosit OOP-ul?
Vicențiu Băcioiu: Când înveți JavaScript de la zero, nu începi cu OOP. Avem developeri care folosesc JavaScript ca prim limbaj de programare pe care îl învață, prin urmare nu au auzit poate de OOP. Partea de OOP va fi mai spre finalul cursului, poate va fi mai greu de învățat. Un alt motiv sunt frameworkurile orientate pe programarea funcțională. Ultimul motiv pe care doresc să îl menționez ține de prototype. JavaScript are modelul acesta unde obiectele sunt moștenite prin prototyping, spre deosebire de celelalte limbaje de programare.
Vlad Luca: Sunt de acord cu Vicențiu. Dacă ne uităm la React, a adus îmbunătățiri în sfera de functional programming, de hooks. Tot ce aveam inițial în class components avem acum în functional components. Mulți programatori învață întâi frameworkul și doar apoi limbajul. JavaScript tratează subiectul OOP diferit de limbajele OOP consacrate (Java, C#). De exemplu, dacă vorbim de encapsulation, în JavaScript nu avem conceptul de private variable care este destul de important când vorbim de OOP. JavaScript propune prototype-based inheritance, pe când celelalte limbaje presupun class-based inheritance.
Care sunt principiile voastre pentru a crea o librărie refolosibilă?
Vlad Luca: Aș crea o librărie refolosibilă și aș face-o disponibilă prin MPM, ca să fie disponibilă în orice proiect. Dacă dorim să avem librăria disponibilă doar intern, o instalăm prin GitHub.
Vicențiu Băcioiu: Sunt de acord cu Vlad. Pentru a construi componenta, la început generalizez. Evident, nu ne putem gândi la toate cazurile. Prin urmare, testul suprem este atunci când utilizăm componenta a doua oară și cel mai probabil o rescriem.
Ce tooluri recomandați sau vă fac viața mai ușoară?
Vicențiu Băcioiu: Pe partea de frontend, eu nu pot trăi fără Network Tab, la fel și cu Sources din Developer Tools din browser. Folosesc uneori Fiddler ca să îmi mockuiesc requesturile către backend, iar pentru asigurarea calității codului folosesc Sonar.
Vlad Luca: Pentru orice proiect avem nevoie de code formatters care ne ajută să ne definim anumite reguli de spacing, lungimea fișierelor, lungimea funcțiilor, lungimea liniilor de cod, pentru a avea un cod cât mai ușor de citit și înțeles. Apoi vine partea de linters care ne ajută să prindem buguri încă din faza de dezvoltare. Pentru partea de mock APIs folosim Prism care ne ajută să rulăm un HTTP mock în local, astfel încât să nu depindem de partea de backend. Noi practic ne definim un contract, avem un OpenAPI, unde ne definim structura API-ului și răspunsurile, iar apoi cu Prism generăm mockul local. Aș include și Jest pentru unit tests sau Cypress pentru partea de testare end-to-end. Nu știu dacă e un tool, dar eu aș include aici și TypeScript-ul care ne aduce în JavaScript un element foarte important, anume type checking. Eu folosesc PhpStorm de la JetBrains ca IDE, proiectul, monolitul fiind scris în PHP. Pentru HTML și JavaScript folosesc Sublime Text.
Vicențiu Băcioiu: Am folosit și eu Sublime Text până când a apărut Visual Studio Code.
Ce tip de proiecte frontend impresionează angajatorii?
Vicențiu Băcioiu: Eu mă uit mai mult la cum e scris codul, ce design patternuri se folosesc, cât de bine e scris, dacă s-au luat pur și simplu librării și s-au pus în proiect. Un proiect mic, gândit bine și scris curat ar ajuta mai mult.
Vlad Luca: Codul trebuie să fie scris curat. Am lucrat cu developeri foarte buni tehnic, dar care scriau un cod greu de descifrat. Nu cred să conteze tehnologia, librăriile și tipul proiectului atâta timp cât codul e scris curat.
Cum ați vinde microserviciile și micro-frontendurile unor programatori care nu le-au mai folosit?
Vlad Luca: E bine să folosim micro-frontendurile când avem nevoie de ele. Nu trebuie folosite pentru că sunt la modă. Trebuie folosite metodele și arhitectura potrivite la momentul potrivit. Recomand micro-frontenduri pentru proiecte mari cu mai multe echipe axate pe frontend, cu un frontend per echipă ca să poată lucra independent unul de altul.
Vicențiu Băcioiu: Sunt de acord cu Vlad, deoarece microserviciile aduc overhead destul de mare pe partea de repositories, de configurări, de deployment, de comunicare și nu numai. Provocarea este mereu cum să optimizezi timpul de încărcare a paginii. Recomand micro-frontenduri pentru migrări de proiecte mari pentru a putea izola câte o funcționalitate, astfel încât să avem site-uri ce funcționează cu mai multe frameworkuri deodată.
Puteți recomanda niște frameworkuri sau librării mai exotice pe care să le încerce ceilalți?
Vicențiu Băcioiu: Recomand Next.js, o librărie React de server-side rendering. Ajută în partea de deployment, de SEO, de routing. Vine cu foarte multe lucruri la pachet. Strălucește în site-urile statice, de prezentare.
Vlad Luca: Recomand librăria Apollo Client, dar aici precondiția ar fi să avem un backend scris cu GraphQL. Această librărie aduce noutăți precum multi-level caching, data normalization și nu numai. Practic, ajută foarte mult pe partea de performanță, ajutându-ne să evităm multe requesturi inutile. În zona de frameworkuri Svelte a depășit React la capitolul popularitate.
Cum vedeți viitorul dezvoltării frontendului peste 5-10 ani?
Vlad Luca:Lucrurile sunt dinamice. În secțiunea JavaScript se doresc modificări în ceea ce privește performanța și developer experience. Cred că pe viitor vom integra tehnologii de genul web assembly care să ne permită să rulăm cod scris în alte limbaje, în browser.
Vicențiu Băcioiu: Vom avea componente scrise și, indiferent de frameworkuri le vom putea face plug and play. S-ar putea să mai vedem o trecere pe serverless unde, pentru site-uri web simple, am putea folosi databases conectate direct la un frontend. Vom avea și frameworkuri orientate pe securitate.