Beranda>Terkait pemrograman>Kode sumber lainnya
Unduh

Kami tidak jauh dari versi resmi pertama dari pembuat kode, namun perlu diingat bahwa beberapa bagian ekosistem masih bersifat eksperimental.

? Apa ini?

teleportHQ adalah platform kode rendah yang memungkinkan tim membangun aplikasi melalui antarmuka alat desain yang sudah dikenal, secara real-time.

Repositori ini menyimpan generator kode yang mendukung editor visual platform.

teleport-home.mp4

Perekat antara platform dan pembuat kode adalah Standar UIDL . UIDL mendefinisikan antarmuka pengguna secara abstrak , tidak bergantung pada kerangka apa pun atau bahkan platform web itu sendiri. Mulai dari UIDL, Anda dapat mengubah abstraksi tersebut menjadi berbagai jenis pengkodean (misalnya React, Vue, WebComponents, dll.).

Pembuat kode ini adalah bagian dari ekosistem yang lebih besar, yang kami bangun secara aktif dalam upaya menyederhanakan pembuatan aplikasi web. Anda dapat membaca lebih lanjut tentang awal mula kami di artikel ini.

Filosofi dibalik pembuat kode adalah:

  • Antarmuka pengguna didekomposisi menjadi beberapa komponen , oleh karena itu fokus pada pembuatan komponen
  • Apa yang dapat dibangun dengan React , juga dapat dibangun dengan Vue atau di atas standar Web Components - kami mendukung banyak target
  • Proyek yang dibangun dengan editor visual harus memiliki standar kualitas yang tinggi (termasuk kinerja, keamanan, aksesibilitas)
  • Kualitas kode yang dihasilkan harus setinggi mungkin, sehingga pengembang mana pun dapat melanjutkan pekerjaannya dan menyempurnakan proyeknya
  • Arsitektur pembuatan kode bersifat terbuka dan dapat diperluas, kami mengundang semua orang untuk berkontribusi!

Baca lebih lanjut tentang Standar UIDL.

Pengaturan Cepat

Cara termudah untuk terjun ke ekosistem teleportasi adalah dengan mencoba salah satu generator komponen yang telah dikonfigurasi sebelumnya : 

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

atau menggunakan benang: 

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

Untuk menghasilkan komponen sederhana, Anda harus memulai dari komponen UIDL : 

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

Menggunakan generator komponen yang telah dikonfigurasi sebelumnya semudah memanggil fungsi async : 

 import ReactGenerator from '@teleporthq/teleport-component-generator-react'

const uidl = { ... } // your sample here

const { files } = await ReactGenerator . generateComponent ( uidl )
console . log ( files [ 0 ] . content )

Output konsol akan menjadi seperti ini: 

 import React from 'react'

const MyFirstComponent = ( props ) => {
  return < span > Hello World! < / span >
}

export default MyFirstComponent

Untuk kerangka lain, cukup ganti paketnya: 

 import VueGenerator from '@teleporthq/teleport-component-generator-vue'

const uidl = { ... } // your sample here

const { files } = await VueGenerator . generateComponent ( uidl )
console . log ( files [ 0 ] . content )

Output konsol akan menjadi seperti ini: 

< template >
  < span >Hello World!</ span >
</ template >

< script >
export default {
  name : ' MyFirstComponent ' ,
}
</ script >

Anda dapat bermain-main dengan struktur UIDL dan juga mengamati kode yang dihasilkan di REPL online. Saat berada di sana, Anda juga dapat memeriksa berbagai contoh komponen yang ditulis dalam format UIDL.

? Ekosistem

Ekosistem teleportasi terdiri dari tiga kategori utama paket: generator komponen , generator proyek , dan pengemas proyek .

Generator Komponen

Kami memiliki generator komponen resmi untuk beberapa kerangka kerja frontend web yang populer. Lihat dokumen resmi untuk pemahaman mendalam tentang arsitektur di balik generator komponen.

Semua generator komponen menampilkan sebuah instance dari paket teleport-component-generator . Anda juga dapat menginstal paket ini dan membuat generator Anda sendiri dengan plugin, pemetaan, dan postprocessor.

Di dokumen, Anda akan menemukan panduan lengkap tentang cara membuat generator komponen khusus Anda.

rasa

  • teleport-component-generator-react - dengan gaya: css-modules , styled-components , styled-jsx , dll.
  • teleport-component-generator-vue - menghasilkan file .vue standar
  • teleport-component-generator-angular - menghasilkan file .ts , .html , dan .css
  • teleport-component-generator-html - (eksperimental)
  • teleport-component-generator-svelte - (segera hadir)

Kemampuan

Berikut daftar fungsi yang didukung oleh UIDL dan generator komponen saat ini, selain lapisan presentasi yang jelas:

  • Nilai dinamis (alat peraga, status) di dalam node html atau pada tingkat atribut
  • Ketikkan definisi untuk props komponen (PropTypes di React, props di Vue)
  • Definisi ketergantungan eksternal
  • Status komponen sederhana (menggunakan hook di React, instance komponen di Vue)
  • Pengendali Peristiwa (terkait dengan perubahan status)
  • Struktur berulang (.map di React, v-for di Vue)
  • Dukungan untuk slot

Generator Proyek

Generator proyek mengandalkan masukan ProjectUIDL dan strategi proyek . ProjectUIDL akan berisi semua informasi tentang perutean, halaman, komponen, dan pengaturan global. Strategi ini akan memberi tahu generator di mana harus meletakkan setiap file dan komponen generator mana yang akan digunakan.

Generator akan menampilkan struktur abstrak dengan folder dan file, tanpa menulis apa pun ke disk. Pengemas proyek bertugas mengambil output dari generator proyek dan menerbitkannya di suatu tempat.

Periksa panduan resmi tentang cara menggunakan generator proyek yang ada atau cara membuat konfigurasi khusus Anda

rasa

  • teleport-project-generator-react - react + react-router dan css-modules di atas create-react-app
  • teleport-project-generator-next - berdasarkan Next.js
  • teleport-project-generator-vue - dengan struktur yang dimulai dari vue-cli
  • teleport-project-generator-nuxt - berdasarkan Nuxt.js
  • teleport-project-generator-angular - berdasarkan pada angular-cli
  • teleport-project-generator-html (eksperimental)

Kemampuan

Selain file dan folder biasa yang dihasilkan pada akhir proses, generator proyek juga menangani:

  • Dukungan untuk pengaturan global, tag meta, gaya, skrip, dll.
  • Mengekstrak semua dependensi eksternal dan menambahkannya ke package.json .
  • Membuat titik masuk untuk setiap aplikasi (bisa berupa index.html atau sesuatu yang spesifik pada kerangka kerja).
  • Membuat file perutean untuk rute klien proyek.
  • Menghasilkan manifes web untuk dukungan PWA.

Pengemas Proyek

Setelah generator membuat kode untuk komponen dan halaman, pengemas proyek akan mengambil keluaran tersebut, meletakkannya di atas templat proyek yang ada, menambahkan aset lokal apa pun yang diperlukan, lalu meneruskan seluruh hasilnya ke penerbit . Penerbit mengkhususkan diri dalam menyebarkan seluruh struktur folder ke pihak ketiga seperti vercel atau github , atau dalam membuat file zip di dalam memori atau sekadar menulis folder ke disk .

Penerbit

  • teleport-publisher-vercel
  • teleport-publisher-github
  • teleport-publisher-codesandbox
  • teleport-publisher-zip
  • teleport-publisher-disk
  • teleport-publisher-netlify (segera hadir)

Bacaan Lebih Lanjut

Beberapa tautan berguna untuk memberi Anda informasi terkini tentang seluruh ekosistem teleportasi :

  • Dokumentasi Lengkap
  • Skema Komponen dan Proyek JSON
  • REPL daring

Perkembangan

Proyek ini menggunakan:

  • TypeScript untuk keamanan jenis dan pemfaktoran ulang yang mudah
  • lerna untuk mengelola monorepo dengan beberapa paket npm
  • bercanda untuk semua jenis tes dan untuk menghitung cakupan kode

Untuk mencobanya secara lokal, kami merekomendasikan penggunaan yarn karena terintegrasi lebih baik dengan lerna dan semua kontributor menggunakannya: 

 yarn

Ini menginstal dependensi di folder root, tetapi juga membuat symlink antara modul independen di dalam folder packages .

Untuk menyelesaikan pengaturan lerna, Anda perlu menjalankan: 

 yarn build

Ini akan menjalankan tugas build di dalam setiap paket individual, membuat folder lib keluaran. Kami memiliki dua keluaran untuk setiap paket: cjs - modul gaya js umum dan esm - modul es modern. Jika Anda ingin mempercepat waktu build, Anda dapat menjalankan build:cjs saja untuk menghindari build esm .

Menjalankan rangkaian pengujian: 

 yarn test
yarn test:coverage

Selain itu, ada paket private di dalam folder lerna bernama teleport-test . Paket tersebut dapat digunakan untuk menguji proses pembuatan kode/file dengan jenis generator proyek/komponen apa pun. Untuk mencobanya, Anda harus: 

 cd packages/teleport-test
npm run standalone

Versi mandiri menggunakan paket teleport-code-generator dan templat yang dideklarasikan secara statis. Untuk menguji dengan templat github dan instance pengemas khusus, Anda harus: 

 cp config.example.json config.json

Anda harus mengganti placeholder dengan token github Anda sendiri. Kemudian Anda dapat menjalankannya dengan: 

 npm run packer

Versi pengemas ini menggunakan UIDL dari examples/uidl-sample . Jika proses berhasil berjalan, Anda akan melihat respon dari project packer dengan format: { success: true, payload: 'dist' } . Tugas ini menggunakan paket teleport-publisher-disk dan menghasilkan empat file proyek berbeda di folder dist .

Silakan buka terbitan untuk segala ketidakberesan, potensi bug yang Anda temukan saat menjalankan ini, atau jika Anda sekadar memiliki pertanyaan atau keingintahuan tentang proyek ini.

? Perencanaan

Bukan hanya kode kami yang bersifat open source, kami juga merencanakan pengembangan pembuat kode di GitHub. Kami memiliki sejumlah isu yang terbuka dan kami mengharapkan kontribusi lebih lanjut dalam hal ini.

Kami secara khusus tertarik untuk membuka diskusi seputar isu-isu yang ditandai dengan label discussion .

Rilis Resmi

Rilis resminya akan beralih ke versi 1.0 . ETA untuk ini adalah sekitar akhir tahun 2019.

? Kontribusi

Kami akan sangat senang jika ada keterlibatan komunitas dalam proyek ini. Kami sangat percaya pada kekuatan sumber terbuka , jadi kami berencana membangun pembuat kode terbaik, bersama dengan seluruh komunitas pengembangan.

Kami membayangkan berbagai jenis keterlibatan mulai saat ini:

  • Mencoba generator dan melaporkan kembali setiap bug dan potensi perbaikan
  • Berkontribusi terhadap permasalahan yang ada, baik pada modul inti maupun pada generator dan plugin yang ada
  • Menjelajahi dan membangun plugin baru untuk generator yang ada
  • Menjelajahi dan membangun generator baru berdasarkan arsitektur yang ada

Terima kasih kepada orang-orang hebat ini (kunci emoji):


Alex Moldova
?
Vlad Nikula
?
Paulus BRIE
? ?
mihaitaba
?
Mihai Serban

Jaya Krishna Namburu
?
Anamaria Oros

ovidiuionut94

alexpausan

Mihai Sampaleanu
?
dua

andreiTnu

Xavier Cazalot

Chavda Bhavik

Eliza Nitoi

TudorCe
?
Dorottya Ferencz
?
William Gounot

Proyek ini mengikuti spesifikasi semua kontributor. Kontribusi apa pun diterima!

✍️ Kontak

Hubungi kami di salah satu saluran berikut:

  • ? Tulis Email
  • Perselisihan
  • ? Kirimkan pesan di twitter
  • Situs web
Memperluas
Informasi Tambahan
Aplikasi Terkait
Direkomendasikan untuk Anda
Informasi Terkait Semua