Una col·lecció de generadors de codi per a aplicacions JavaScript modernes

Bloc

Una col·lecció de generadors de codi per a aplicacions JavaScript modernes

Una col·lecció de generadors de codi per a aplicacions JavaScript modernes

Generadors de codi v0.10: beta!

No estem lluny del primera versió oficial dels generadors de codi, però, mentrestant, tingueu en compte que algunes de les parts de l’ecosistema són experimentals.

🤔 Què és això?

El generadors de codi formen part del teletransport HQ ecosistema, que estem construint activament en un esforç per racionalitzar la creació d’aplicacions web i mòbils. Podeu obtenir més informació sobre els nostres inicis a Aquest article .

Els generadors de codi els utilitzen en línia visual editor , una plataforma que us permet crear aplicacions a través d’una interfície d’eines de disseny coneguda. La cola entre la plataforma i els generadors de codi és la Estàndard UIDL . El UIDL defineix el interfícies d'usuari en un resum independentment de qualsevol marc o fins i tot de la pròpia plataforma web. A partir de la UIDL, podeu convertir aquesta abstracció en diferents sabors de codificació (per exemple, React, Vue, WebComponents, etc.).

La filosofia darrere dels generadors de codi és:

  • Les interfícies d'usuari es descomponen en components , d’aquí el focus en la generació de components
  • El que es pot construir amb React, també es pot construir amb Vue o a sobre del Web Components estàndard: admetem múltiples objectius
  • Un projecte construït amb l'editor visual hauria de tenir un fitxer alt nivell de qualitat (rendiment, seguretat, accessibilitat inclosos)
  • Generat qualitat del codi hauria de ser el més alt possible, de manera que qualsevol desenvolupador pogués recollir la feina a partir d’aquí i millorar el projecte
  • L’arquitectura de generació de codi és oberta i extensible, convidem tothom a contribuir!

Llegiu més sobre Estàndard UIDL .

Configuració ràpida

La forma més senzilla de saltar al teletransportar l’ecosistema és provar un dels preconfigurats generadors de components :

npm install @teleporthq/teleport-component-generator-react npm install @teleporthq/teleport-component-generator-vue npm install @teleporthq/teleport-component-generator-angular npm install @teleporthq/teleport-component-generator-stencil npm install @teleporthq/teleport-component-generator-preact npm install @teleporthq/teleport-component-generator-reactnative

o fent servir filats:

yarn add @teleporthq/teleport-component-generator-react yarn add @teleporthq/teleport-component-generator-vue yarn add @teleporthq/teleport-component-generator-angular yarn add @teleporthq/teleport-component-generator-stencil yarn add @teleporthq/teleport-component-generator-preact yarn add @teleporthq/teleport-component-generator-reactnative

Per generar un component senzill, heu de començar des de component UIDL :

{ 'name': 'My First Component', 'node': { 'type': 'element', 'content': { 'elementType': 'text', 'children': [ { 'type': 'static', 'content': 'Hello World!' } ] } } }

Utilitzar els generadors de components preconfigurats és tan fàcil com trucar a un asíncron funció:

import ReactGenerator from '@teleporthq/teleport-component-generator-react' const uidl = { ... } // your sample here const { files } = await ReactGenerator.generateComponent(uidl) console.log(files[0].content)

La sortida de la consola serà com:

import React from 'react' const MyFirstComponent = (props) => { return Hello World! } export default MyFirstComponent

Per a altres marcs, només cal canviar el paquet:

import VueGenerator from '@teleporthq/teleport-component-generator-vue' const uidl = { ... } // your sample here const { files } = await VueGenerator.generateComponent(uidl) console.log(files[0].content)

La sortida de la consola serà com:

Hello World! export default { name: 'MyFirstComponent', }

Podeu jugar amb l'estructura UIDL i també observar el codi generat a el REPL en línia . Mentre estigueu allà, també podeu comprovar diferents exemples de components escrits en format UIDL.

temes d’estudi visual 2020

Ecosistema

L’ecosistema de teletransport està format per tres principals categories de paquets: generadors de components , generadors de projectes i empaquetadors de projectes .

Generadors de components

Tenim oficial generadors de components per un parell de marcs d'interfície web populars , però estem treballant activament per donar suport a l'aplicació mòbil amb react-native. Consulteu el documents oficials per a una comprensió profunda de l'arquitectura darrere dels generadors de components.

Tots els generadors de components exposen una instància del teleport-component-generator paquet. També podeu instal·lar aquest paquet i crear el vostre propi generador amb connectors , assignacions i postprocessadors .

Als documents trobareu una guia completa sobre com fer-ho creeu el vostre generador de components personalitzat .

Sabors
  • teleport-component-generator-react - amb estil: css-modules, styled-components, styled-jsx, etc.
  • teleport-component-generator-vue - generant estàndard .vue Fitxers
  • teleport-component-generator-angular - genera .ts, .html i .css Fitxers
  • teleport-component-generator-preact - similar a react, amb un munt d’opcions d’estil
  • teleport-component-generator-stencil - (experimental) - genera .tsx fitxers i estàndard .css Fitxers
  • teleport-component-generator-react-native - (experimental)
  • teleport-component-generator-svelte - (pròximament)
Capacitats

A continuació, es mostra una llista de funcionalitats que l’UIDL i els generadors de components donen suport en aquest moment, a més de l’evident capa de presentació:

  • Valors dinàmics (accessoris, estat) dins de nodes html o a nivell d'atribut
  • Definicions de tipus per a accessoris de components (PropTypes a React, accessoris a Vue)
  • Definició de dependències externes
  • Estat de component simple (mitjançant ganxos a React, instància de component a Vue)
  • Gestors d'esdeveniments (relacionats amb canvis d'estat)
  • Repetiu les estructures (.map a React, v-for a Vue)
  • Suport per a ranures

Generadors de projectes

Els generadors de projectes confien en un ProjectUIDL entrada i en un estratègia del projecte . El ProjectUIDL contindrà tota la informació sobre l’encaminament, les pàgines, els components i la configuració global. L’estratègia indicarà als generadors on col·locar cada fitxer i quin generador de components utilitzar.

Els generadors generaran una estructura abstracta amb carpetes i fitxers, sense escriure res al disc. El paquetador de projectes té la tasca d’agafar la sortida d’un generador de projectes i publicar-la en algun lloc.

Consulteu les guies oficials a com utilitzar un generador de projectes existent o bé com es crea la configuració personalitzada

Sabors
  • teleport-project-generator-react - react + react-router i css-modules a sobre de create-react-app
  • teleport-project-generator-next - basat en Next.js
  • teleport-project-generator-vue - amb una estructura que parteix del vue-cli
  • teleport-project-generator-nuxt - basat en Nuxt.js
  • teleport-project-generator-preact - basat en preact-cli
  • teleport-project-generator-angular - basat en el angular-cli
  • teleport-project-generator-gatsby
  • teleport-project-generator-gridsome
  • teleport-project-generator-stencil (experimental)
  • teleport-project-generator-react-native (experimental)
  • teleport-project-generator-static (pròximament)
Capacitats

A més dels fitxers i carpetes habituals generats al final del procés, els generadors de projectes també s’encarreguen de:

  • Suport per a configuracions globals, metaetiquetes, estil, scripts, etc.
  • Extreient totes les dependències externes i afegint-les al package.json.
  • Creació del punt d'entrada per a cada aplicació (pot ser un index.html o alguna cosa que sigui específic del marc).
  • Creació d’un fitxer d’encaminament per a les rutes de client del projecte.
  • Generació d’un manifest web per al suport de PWA.

Embaladors de projectes

Una vegada que un generador va crear el codi per als components i les pàgines, el fitxer empaquetador de projectes agafarà aquesta sortida, la posarà a sobre d'una existent plantilla de projecte , afegiu qualsevol local actius necessari i després passarà tot el resultat a a editor . Els editors estan especialitzats en desplegar tota l'estructura de carpetes a un tercer com now o github, o en crear una memòria a la memòria zip o simplement escrivint la carpeta a disk.

Editors
  • teleport-publisher-now
  • teleport-publisher-github
  • teleport-publisher-codesandbox
  • teleport-publisher-zip
  • teleport-publisher-disk
  • teleport-publisher-netlify (pròximament)

Per llegir més

Alguns enllaços útils per posar-vos al dia amb tota la informació teletransportar-se ecosistema:

la criptografia forestal prohibida

Desenvolupament

Aquest projecte utilitza:

  • TypeScript per a seguretat de tipus i fàcil refactorització
  • lerna per gestionar el monorepo amb diversos paquets npm
  • és per a tot tipus de proves i per al càlcul de la cobertura del codi

Per donar-li una volta local, es recomana utilitzar yarn, ja que s'integra millor amb lerna i tots els col·laboradors l'utilitzen:

yarn

Això instal·la les dependències a la carpeta arrel, però també crea els enllaços simbòlics entre els mòduls independents de packages carpeta.

Per completar la configuració de lerna, heu d'executar:

yarn build

Això executarà el build tasca dins de cada paquet individual, creant la sortida lib carpeta. Tenim dues sortides per a cada paquet: cjs - mòduls d'estil js comuns i esm - mòduls moderns. Si voleu accelerar el temps de construcció, només podeu executar build:cjs per evitar el esm construir.

Execució del conjunt de proves:

yarn test yarn test:coverage

A més, hi ha un private paquet dins de la carpeta lerna anomenat teleport-test. Aquests paquets es poden utilitzar prova el procés de generació de codi / fitxer amb qualsevol sabor de generador de components / projectes. Per donar-li una volta, haurà de:

cd packages/teleport-test npm run standalone

La versió independent utilitza el teleport-code-generator package i les plantilles declarades estàticament. Per provar amb les plantilles de github i la instància de packer personalitzat, heu de:

cp config.example.json config.json

Haureu de substituir el marcador de posició per el vostre propi testimoni github . A continuació, podeu executar-lo amb:

npm run packer

Aquesta versió del packer utilitza els UIDL del examples/uidl-sample. Si el procés s'executa correctament, veureu les responoses del paquetador de projectes en el format: { success: true, payload: 'dist' }. La tasca utilitza el teleport-publisher-disk package i genera quatre fitxers de projecte diferents a dist carpeta.

Si us plau obriu un número per qualsevol irregularitat, possible error que trobeu mentre executeu això, o si simplement teniu alguna pregunta o curiositat sobre aquest projecte.

🤖 Planificació

No només el nostre codi és de codi obert, també estem planejant el desenvolupament dels generadors de codi a GitHub. Tenim una sèrie de qüestions obert i esperem més contribucions al respecte.

Ens interessa especialment obrir debats sobre els problemes etiquetats amb el discussion etiqueta.

Llançament oficial

La versió oficial serà un canvi a la versió 1.0. ETA per això és cap a finals de 2019.

Detalls de la descàrrega:

Autor: teleporthq

Demostració: https://teleporthq.io/

Codi font: https://github.com/teleporthq/teleport-code-generators

#javascript