Introducció
Tant si sou nou a la programació com si ja sou un desenvolupador experimentat, en aquesta indústria, aprendre nous conceptes i llenguatges/marcs és imprescindible per estar al dia de les tendències.
Preneu, per exemple, React, que només va ser de codi obert per Facebook fa quatre anys i que ja s'ha convertit en l'opció número u per als desenvolupadors de JavaScript a tot el món.
Vue i Angular, per descomptat, també tenen la seva base de fans legítima. I després hi ha Svelte i altres marcs de propòsit general com Next.js o Nuxt.js. I Gatsby, i Gridsome, i Quasar... i molt més.
Si voleu demostrar-vos com a desenvolupador de JavaScript experimentat, heu de tenir almenys una mica d'experiència amb diversos marcs i biblioteques, a més de fer un bon treball antic de JS.
Per ajudar-vos a convertir-vos en un mestre de front-end el 2020, he creat nou projectes diferents, cadascun centrat en diferents marcs i biblioteques de JavaScript com a pila tecnològica que podeu crear i afegir a la vostra cartera. Recorda que res t'ajuda més que posar les coses en pràctica, així que endavant, encén la teva ment i fes-ho possible.
L'article va ser traduït amb el suport d'EDISON Software, que I .
Aplicació de cerca de pel·lícules amb React (amb ganxos)
El primer que podeu començar és crear una aplicació de cerca de pel·lícules amb React. A continuació es mostra una imatge de com serà l'aplicació final:
Què aprendràs?
En crear aquesta aplicació, millorareu les vostres habilitats de React mitjançant l'API de Hooks relativament nova. El projecte de mostra utilitza components React, molts ganxos, una API externa i, per descomptat, algun estil CSS.
Pila de tecnologia i característiques
- Reacciona amb ganxos
- crear-reaccionar-aplicació
- JSX
- CSS
Sense utilitzar cap classe, aquests projectes us proporcionen el punt d'entrada perfecte a React funcional i us ajudaran sens dubte el 2020. pots trobar . Segueix les instruccions o crea'l teu.
Aplicació de xat amb Vue
Un altre gran projecte per a vosaltres és crear una aplicació de xat utilitzant la meva biblioteca de JavaScript preferida: VueJS. L'aplicació tindrà un aspecte com aquest:
Què aprendràs?
En aquest tutorial, aprendràs a crear una aplicació Vue des de zero: crear components, gestionar estats, crear rutes, connectar-se a serveis de tercers i fins i tot gestionar l'autenticació.
Pila de tecnologia i característiques
- Vue
- Vuex
- vue router
- Vista CLI
- empenyedor
- CSS
Aquest és un projecte realment fantàstic per començar amb Vue o millorar les vostres habilitats existents per començar el desenvolupament el 2020. pots trobar .
Bonica aplicació de temps amb Angular 8
Aquest exemple us ajudarà a crear una bonica aplicació meteorològica amb Angular 8:
Què aprendràs?
Aquest projecte us ensenyarà habilitats valuoses per crear aplicacions des de zero, des del disseny fins al desenvolupament, fins a una aplicació llesta per desplegar.
Pila de tecnologia i característiques
- Angular 8
- Base de dades
- Renderització del costat del servidor
- CSS amb Grid i Flexbox
- Mòbil amigable i adaptabilitat
- Mode fosc
- Bella interfície
El que m'agrada molt d'aquest projecte integral és que no estudies les coses de manera aïllada. En canvi, apreneu tot el procés de desenvolupament, des del disseny fins al desplegament final.
Aplicació de tasques pendents amb Svelte
Svelte és com el nen nou en l'enfocament dels components, almenys similar a React, Vue i Angular. I aquest és un dels productes nous més interessants per al 2020.
Les aplicacions de tasques pendents no són necessàriament el tema més candent, però realment us ajudaran a perfeccionar les vostres habilitats Svelte. Es veurà així:
Què aprendràs?
Aquest tutorial us mostrarà com crear una aplicació amb Svelte 3, de principi a fi. Utilitzareu components, estils i gestors d'esdeveniments
Pila de tecnologia i característiques
- Esvelt 3
- Components
- Estilisme amb CSS
- Sintaxi ES6
No hi ha molts bons projectes d'inici Svelte, així que vaig trobar .
Aplicació de comerç electrònic amb Next.js
Next.js és el marc més popular per crear aplicacions React que admeten la representació del servidor des de la caixa.
Aquest projecte us mostrarà com crear una aplicació de comerç electrònic amb aquest aspecte:
Què aprendràs?
En aquest projecte, aprendràs a desenvolupar amb Next.js: crear pàgines i components nous, recuperar dades, estilitzar i desplegar una aplicació Next.
Pila de tecnologia i característiques
- Next.js
- Components i pàgines
- Mostreig de dades
- Estilisme
- Desplegament del projecte
- SSR i SPA
Sempre és fantàstic tenir un exemple real com una aplicació de comerç electrònic per aprendre alguna cosa nova. Tu pots .
Bloc multilingüe complet amb Nuxt.js
Nuxt.js és per a Vue, com Next.js és per a React: un marc fantàstic per combinar la representació del costat del servidor i les aplicacions d'una sola pàgina
L'última aplicació que podeu crear serà així:
Què aprendràs?
En aquest projecte de mostra, aprendràs a crear un lloc web complet amb Nuxt.js, des de la configuració inicial fins al desplegament final.
Aprofita moltes de les funcions interessants que ofereix Nuxt, com ara pàgines i components, i estilisme amb SCSS.
Pila de tecnologia i característiques
- Nuxt.js
- Components i pàgines
- mòdul storyblock
- Mixins
- Vuex per a la gestió estatal
- SCSS per estilitzar
- Intermediaris de Nuxt
, que inclou moltes de les grans característiques de Nuxt.js. Personalment, m'encanta treballar amb Nuxt, així que hauríeu de provar-ho, ja que també us convertirà en un gran desenvolupador de Vue.
Bloc amb Gatsby
Gatsby és un gran generador de llocs estàtics que utilitza React i GraphQL. Aquest és el resultat del projecte:
Què aprendràs?
En aquest tutorial, aprendràs a utilitzar Gatsby per crear un bloc que utilitzaràs per escriure els teus propis articles amb React i GraphQL.
Pila de tecnologia i característiques
- gatsby
- Reaccionar
- GraphQL
- Connectors i temes
- MDX/Markdown
- Bootstrap CSS
- plantilles
Si mai has volgut crear un bloc, com fer-ho amb React i GraphQL.
No dic que WordPress sigui una mala elecció, però amb Gatsby podeu crear llocs web d'alt rendiment amb React, que és una combinació increïble.
Bloc amb Gridsome
Gridsome per a Vue... D'acord, ja ho teníem amb Next/Nuxt.
Però el mateix passa amb Gridsome i Gatsby. Tots dos utilitzen GraphQL com a capa de dades, però Gridsome utilitza VueJS. També és un generador de llocs estàtics fantàstic per ajudar-vos a crear grans blocs:
Què aprendràs?
Aquest projecte us ensenyarà a crear un bloc senzill per començar amb Gridsome, GraphQL i Markdown. També explica com desplegar una aplicació mitjançant Netlify.
Pila de tecnologia i característiques
- Gridsome
- Vue
- GraphQL
- Markdown
- netlify
Certament, aquest no és el tutorial més complet, però cobreix els conceptes bàsics de Gridsome i .
Reproductor d'àudio semblant a SoundCloud amb Quasar
Quasar és un altre marc de Vue que es pot utilitzar per crear aplicacions mòbils. En aquest projecte, creareu una aplicació de reproductor d'àudio, per exemple:
Què aprendràs?
Tot i que altres projectes se centren principalment en aplicacions web, aquest us mostrarà com crear una aplicació mòbil amb Vue i el framework Quasar.
Ja hauríeu de tenir un Còrdova que funcioni amb Android Studio/Xcode configurat. Si no, el manual té un enllaç al lloc web de Quasar on us mostren com configurar-ho tot.
Pila de tecnologia i característiques
- Quàsar
- Vue
- Còrdova
- wavesurfer
- Components de la IU
, demostrant les capacitats de Quasar per crear aplicacions mòbils.
Font: www.habr.com