2020, încă căutând un cadru JS productiv

Când creați un produs pentru propria companie, sunteți liberi să petreceți timp înființând un mediu de dezvoltare care să se potrivească propriilor ciudățenii. Desigur, veți petrece o perioadă rezonabilă de timp.

Dar când te dezvolți pentru alții, nu ai această libertate. Trebuie să livrați un cod de înaltă calitate într-un timp previzibil.

Pentru a fi competitiv, trebuie să treci peste clienți. Fiecare aplicație nu poate fi prima dvs. aplicație. Cunoștințele și codul generic trebuie reutilizate. De cele mai multe ori asta înseamnă să te bazezi pe cadre.

În calitate de proprietar al unei agenții, am iubit întotdeauna Meteor. Este unul dintre cadrele JavaScript rare care se concentrează cu adevărat pe productivitate: o arhitectură cu primul pachet, o abordare izomorfă, o soluție de persistență imediată …

Sunt, de asemenea, un colaborator principal al Cadrul Vulcan.js al lui Sacha Greif. Vulcan este un cadru full-stack opinionat, implementat ca un super-set de Meteor. Merge cu un pas mai departe, oferind modele declarative pentru o dezvoltare foarte rapidă și bazându-se pe Apollo GraphQL.

Totul (schema GraphQL, API, structura bazei de date, formulare, tabele de date etc.) este generat automat pe baza unei scheme JavaScript. Mișto, nu-i așa?

Cum sa inlocuiti Meteor cu Next Va prezentam Vulcan.svg

Limitările Meteorului sunt însă un tavan de sticlă. Am avut proiecte de succes cu Meteor și Vulcan, dar niciodată nu aș putea împinge aceste cadre către clienți mai mari. Prea multe probleme de scalabilitate, lipsa de tracțiune, scule de testare slabe, le spuneți.

Întorcându-mă la primul loc, trebuia să găsesc un cadru cu care să mă pot căsători.

Următorul vs Meteor?

Asta compară mere și portocale!

Când am descoperit pentru prima dată Next în 2017, a fost un cadru promițător doar pentru front-end. Doar front-end. L-am folosit pentru a construi site-ul companiei mele și apoi am uitat de el.

Și apoi, oamenii din jurul meu au început să se comporte ciudat. Au vorbit brusc despre două cadre fără nimic în comun, Meteor și Next, de parcă ar fi înlocuibile. Ai schimbat Meteor cu Next? De ce nu înlocuiți Express cu aplicația Create React în timp ce sunteți la ea?

Cum sa inlocuiti Meteor cu Next Va prezentam Vulcan
Puteți folosi chiar și create-react-app pentru a lupta împotriva hackerilor. Captură de ecran a emisiunii TV franceze „Bureau des légendes” (Canal +).

Din cate imi amintesc, Reaction Commerce a fost unul dintre primele cadre non-banale care au făcut schimbarea.

Nu eram convins. Și într-adevăr, au trebuit să implementeze încă o API GraphQL deasupra aplicației lor Meteor pentru a comunica cu front end-ul Next. Tranzacționarea unui cadru pentru 2 nu este cea mai bună afacere, așa că am păstrat Vulcan un cadru bazat pe Meteor.

1611320108 674 Cum sa inlocuiti Meteor cu Next Va prezentam Vulcan

Dacă credeți că a compara Meteor cu Next înseamnă a compara mere și portocale, nu vă înșelați. Până în prezent, sloganul lui Next este încă „The React framework”. Nu „Cadrul nodului”.

Și totuși, am început să mă răzgândesc acum câteva luni.

De la capăt la stiva completă cu rute API

Rutele API au fost introduse oficial în iulie 2019 cu lansarea v9.

Asta m-a condus din nou pe banda următoare. Rutele API înseamnă că Next.js este acum un cadru full-stack minimalist, dar perfect viabil.

Vulcan este construit în jurul GraphQL. Și GraphQL este o potrivire excelentă pentru rutele API. API-ul este servit printr-un punct final unic dinamic / graphQL. În Următorul, acest lucru se traduce prin crearea unei rute API graphql.js. Ușor de țăran.

În prezent, Next acoperă întregul spectru de la stivă la stivă completă

Următorul este din ce în ce mai denumit „cadru hibrid”. Acest lucru are sens, deoarece versatilitatea sa este extremă.

  • Puteți dezvolta o aplicație full-stack cu un back-end în stil serverless.
  • Puteți dezvolta o aplicație SaaS cu redare dinamică pe partea de server.
  • Nu doriți să mențineți un server? Puteți urma filozofia JAMstack și puteți exporta o aplicație statică cu redare pe partea de server în timp de construire.
  • Dacă sunteți alergic la JS din partea clientului, puteți merge până la eliminarea JavaScript din pachet și păstrați doar cod HTML.

Dar nu credeți că Next este un jack al tuturor meseriilor. Este un concurent serios cu Gatsby în forma sa statică. Este o alternativă promițătoare la Meteor în forma sa completă. Vercel (ex Zeit) a făcut o treabă extraordinară, menținându-l atât de înaltă calitate, cât și foarte ușor, indiferent de cazul de utilizare.

1611320109 449 Cum sa inlocuiti Meteor cu Next Va prezentam Vulcan

Nu renunțați încă la Meteor

Vreau să clarific ceva. Înlocuirea Meteorului cu Următorul ca cadru de bază din Vulcan nu înseamnă că noi credem că Meteor ar trebui să fie abandonat cu totul.

Există un lucru important pe care l-am învățat din experimentele noastre cu Apollo și Meteor în Vulcan: dacă intenționați să folosiți Meteor, îmbrățișați doar modul în care funcționează. Uitați de GraphQL. Uitați de Webpack. Deși sunt create de aceiași oameni, Apollo și Meteor intră în conflict foarte mult. Se simte ciudat pentru dezvoltatorii GraphQL, se simte ciudat pentru puriștii Meteor.

Utilizați DDP, metode, pub / sub, aflați cum să vă scalați aplicația, alăturați-vă pe forum, cumpărați căni de cafea cu sigla Meteor pe ele. Acum că Tiny a reînviat Meteor, este un pariu sigur pentru anii următori.

Cu Vulcan + Next, ne străduim pur și simplu să oferim o alternativă GraphQL la Meteor. Nu este mai rău sau mai bine, este aceeași filozofie cu o implementare diferită.

Un cadru este ca un instrument muzical. Nu alegeți cel mai la modă, alegeți cel care vi se potrivește. Dacă instrumentul tău este Meteor, mergi după el.

1611320109 678 Cum sa inlocuiti Meteor cu Next Va prezentam Vulcan

Vă prezentăm Vulcan Next Starter, o aplicație Next de ultimă generație

Folosirea Următorului din cutie este perfectă. Obțineți un sistem de construcție, o soluție de stilizare, o structură rațională de dosare.

Dar dacă doriți să creați o aplicație pentru următorul start de miliarde de dolari, probabil că veți avea nevoie de câteva alte instrumente. Amintiți-vă, căutăm o alternativă la Meteor pentru prima productivitate.

O configurare interesantă ar putea fi aceasta:

  • Cypress și Jest pentru testarea unității și e2e
  • Carte de povești pentru testarea vizuală și documentația de proiectare
  • Internaționalizare, alias i18n (mai ales dacă ești din Franța ca mine :))
  • TypeScript, pentru a vă exprima modelul de domeniu prin tipuri statice
  • UI material pentru a obține un set solid de componente de bază personalizabile
  • Apollo Client va comunica cu API-urile GraphQL
  • Opțional, Apollo Server va configura un punct de intrare GraphQL, cu Playground și Voyager pentru explorarea API

Următorul oferă câteva exemple în repo-ul de bază. Dar acest lucru nu este suficient într-un context real. Aceste instrumente pot interacționa complet într-un mod neașteptat.

Tastarea numai a componentelor clientului, cum ar fi Leaflet sau Plotly, se poate dovedi dificilă. Același lucru este valabil și pentru unificarea sistemului de compilare Next, Jest și Storybook sau pentru evitarea interacțiunilor defecte între Apollo și Material UI în timpul redării de pe server. Redirecționarea cu SSR înseamnă gestionarea în comun a scenariilor server și client. I18n este deosebit de greu de configurat de unul singur. Și lista continuă.

Crede-mă, nu vrei să abordezi astfel de probleme singur. Si ghici ce? Am trecut prin bătăi de cap pentru tine!

Toate aceste instrumente sunt instalate în noul nostru, strălucitor, Vulcan Next Starter.

Mai avem un drum lung înainte, dar suntem mândri să spunem că este sigur de utilizat în producție.

Pasii urmatori

Cazanul nostru îndeplinește doar jumătate din promisiunile noastre. Veți obține o configurare front-end interesantă, dar totuși pierdeți o bază de date și instrucțiuni pentru implementarea back-end-ului. Acest lucru nu este comparabil cu Meteor în acest moment. O mână de lambda nu este un cadru. Nici abonarea la soluții găzduite în cloud.

1611320109 854 Cum sa inlocuiti Meteor cu Next Va prezentam Vulcan

Aici intervine Vulcan. De-a lungul anilor, am creat un puternic generator API GraphQL, cu Mongo ca bază de date și cu o mulțime de utilități front-end. Bineînțeles, următorul pas pentru noi este să combinăm atât Vulcan, cât și Next pentru a crea un adevărat cadru full-stack.

Puteți urmări progresul nostru alăturându-ne Slăbiciunea lui Vulcan.

Next și Meteor vor fi cetățeni de primă clasă ai Vulcanului, dar orice tip de tehnologie front-end sau back-end JS s-ar putea bucura de ea. Fie că este Gatsby sau un mic-serviciu Node personalizat. La Vulcan, vindem mere și portocale, atâta timp cât vă fac un dezvoltator eficient.

Acum, este timpul pentru noi să ne întoarcem la muncă, avem multe de făcut. Sper să ne vedem la Vulcan!

Un starter din tranșee

Mulțumiri speciale Aplines, care a avut încredere în compania mea (LBKE) în utilizarea celor mai noi tehnologii pentru produsul lor. Datorită acestora, am testat complet toate caracteristicile incluse în Vulcan Next Starter într-o aplicație profesională din viața reală.

1611320110 993 Cum sa inlocuiti Meteor cu Next Va prezentam Vulcan

Ei caută dezvoltatori, așa că, dacă doriți să aflați mai multe despre utilizarea Next și GraphQL la scară, acesta este locul ideal: [email protected]