codeframe
1.0.0
Codeframe adalah cara tercepat, termudah untuk membangun dan menggunakan halaman web statis yang cepat, dan itu dirancang untuk menjadi tempat terbaik untuk mempelajari cara membuat sesuatu untuk web, di web. Anda dapat menemukannya berjalan secara langsung di codeframe.co.
Mudah digunakan. Codeframe dibangun pertama dan terutama untuk eksperimen cepat dan untuk orang yang belajar kode untuk pertama kalinya, sehingga menghindari kompleksitas dan fitur tambahan untuk kesederhanaan dan kemudahan penggunaan.
Itu cepat. Lingkungan pengembangan Anda harus bergerak dengan kecepatan ide -ide Anda, dan tanpa perkakas, tidak ada alasan codeframe tidak bisa instan. Saya membangun codeframe untuk mengurangi waktu dari ide menjadi prototipe yang dapat dibagikan sebanyak mungkin secara fisik. Cukup buka editor, tulis kode, dan bagikan dalam satu klik.
? Ini open-source dan sepenuhnya diperiksa. Segala sesuatu yang menjalankan codeframe, dari tumpukan backend ke kode JavaScript di belakang editor codeframe, adalah sumber terbuka dan diinspeksi tepat di browser. Saya pikir memiliki kode sumber yang dapat dibaca dalam produk yang disampaikan membuat perbedaan bagi orang yang belajar kode, dan codeframe memprioritaskan ini daripada kompleksitas tambahan dan keuntungan efisiensi yang kecil dengan bundel yang lebih kecil dan sumber kepemilikan.
Jika Anda tidak secara khusus membutuhkan sesuatu yang dirancang untuk kecepatan atau untuk siswa yang baru berkode, ada alat lain yang mungkin bekerja lebih baik untuk Anda, dengan lebih banyak fitur. Codepen adalah IDE web dalam browser klasik dengan fitur yang lebih kuat dan opsi kustomisasi; CodeSandBox luar biasa untuk bereksperimen dengan proyek-proyek dengan langkah-langkah build / bundling, dan repl. Ini memiliki rangkaian alat pengembangan yang luar biasa untuk lingkungan HTML mereka, termasuk kemampuan untuk membuat file / folder tambahan dan multipemain, yang memungkinkan kolaborasi real-time yang lancar.
Semua yang Anda butuhkan untuk menjalankan versi Codeframe Anda sendiri ada di repositori open-source ini. Inilah cara Anda dapat menjalankan versi Anda sendiri di Codeframe di komputer atau server Anda.
Anda akan membutuhkan alat ini:
git , untuk menyalin repositori dari github ke komputer Anda. Dapatkan git di sini.npm (atau yarn alternatifnya) untuk menginstal dependensi seperti Express. NPM biasanya dilengkapi dengan Node.js.ls , cd , dll.Setelah Anda menginstal alat dan siap, langkah pertama adalah mengkloning repositori git ini ke komputer Anda. Pergi ke direktori tempat Anda ingin mengatur codeframe, dan jalankan
$ git clone https://github.com/thesephist/codeframe.git (Jika Anda memiliki SSH yang diatur untuk git, dan tahu cara menggunakannya, Anda dapat menggunakan git:// url sebagai gantinya. Jika tidak, jangan khawatir tentang itu.)
Sekarang, cd ke dalam direktori codeframe baru yang baru saja dibuat, dan Anda akan melihat semua file di repositori codeframe.
$ cd codeframe/
$ ls
src/ static/ docs/ README.md LICENSE ... Di sini, mari kita coba mulai codeframe dengan node.js menggunakan perintah npm start .
$ npm start
...
Error: Cannot find module ' express '
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:603:15)
... Ini berarti Node.js tidak dapat menemukan express , perpustakaan JavaScript untuk membangun server web yang bergantung pada codeframe. Mari kita instal dependensi seperti Express dengan menjalankan npm install , lalu coba lagi.
$ npm install
...
$ npm start
Codeframe running on localhost:4556 Anda mungkin memperhatikan bahwa NPM membuat direktori baru yang disebut node_modules/ , di mana ia akan menginstal dependensi codeframe.
Jika Anda melihat pesan Codeframe running on localhost:4556 , ini berarti Anda memiliki Codeframe dan berjalan di komputer Anda. Buka browser Anda dan buka alamat http://localhost:4556 . Ini harus memberi tahu browser Anda untuk menemukan halaman yang berjalan di port 4556 (port default Codeframe) di komputer Anda, dan memuat halaman utama Codeframe.
Setelah Anda mengubah file layanan backend (di bawah src/ ), Anda dapat memulai ulang server dengan npm start (Ctrl + C untuk mengakhiri server yang sedang berjalan) untuk melihat perubahan terjadi. Jika Anda mengedit kode frontend, tidak perlu restart - cukup muat ulang halaman di browser!
Jika Anda ingin tahu tentang pekerjaan dalam codeframe, saya membangun versi basis kode yang sepenuhnya beranotasi yang tersedia di sini di halaman GitHub menggunakan alat yang disebut Litterate. Meskipun itu adalah tempat yang baik untuk melihat bagaimana semuanya diimplementasikan, bagian ini memberikan gambaran tingkat tinggi tentang bagaimana sistem dirancang.
Semua codeframes adalah (untuk saat ini) sepasang file, file HTML dan file JavaScript, yang bisa kami perlakukan sebagai potongan teks. Codeframe menyimpan semua file, baik HTML dan JavaScript, di tempat yang sama, dengan cara yang sama, dengan cara yang tidak dapat dimodifikasi setelah disimpan. Ini adalah basis data berbasis hash yang dapat diubah oleh Codeframe.
Ketika pengguna membuat file baru atau versi baru file, editor mengirim file ke backend. Backend mendapatkan file dan hash (saat ini menggunakan SHA256) dan menggunakan hash untuk membuat nama file pendek dan praktis unik untuk file tersebut. File disimpan ke lokasi di backend ( db/ secara default) dengan nama file hash. Ini memastikan bahwa, jika kami mencoba menyimpan file yang sama beberapa kali, kami secara efektif hanya menyimpan satu file di backend. Karena ini banyak terjadi dalam praktik menggunakan codeframe, ini efisien.
Setiap file diidentifikasi oleh hashnya dengan cara ini, jadi menggunakan dua hash (masing -masing satu untuk file HTML dan JavaScript dari codeframe), kita dapat menentukan codeframe yang unik. Beginilah cara kerja codeframe; URL setiap codeframe berisi dua hash, masing -masing untuk HTML dan JavaScript. Saat Anda meminta codeframe, backend menemukan file yang disimpan sebelum menggunakan hash sebagai nama file, dan mengembalikan file ke editor atau ke browser untuk dilihat Anda.
Basis data file berbasis hash ini memiliki beberapa keuntungan. Fakta bahwa setiap file disimpan sekali dan tidak pernah ditimpa berarti bahwa setiap codeframe, pada titik waktu mana pun, sepenuhnya ditandai oleh URL -nya. Changelog Anda adalah riwayat browser Anda secara efektif, dan setiap codeframe yang Anda bagikan akan tetap ada versi itu selamanya. Ini juga berarti layanan backend tetap sangat sederhana-ini adalah desain yang sepenuhnya fungsional tanpa efek samping di luar database, yang merupakan toko nilai kunci yang tidak dapat diubah.
Implementasi saat ini, yang hanya didasarkan pada sistem file, juga gagal di beberapa daerah. Terutama, menggunakan FS sebagai lapisan penyimpanan database. Karena sistem file tidak dirancang untuk digunakan dengan cara ini, dalam jumlah besar kita dapat mencapai hambatan skalabilitas di mana kita harus beralih ke toko nilai kunci yang berbeda seperti Amazon's S3. Kami juga menyimpan perubahan bertahap untuk setiap file dalam file yang sepenuhnya terpisah dalam database. Ini juga cara Git menangani perubahan, tetapi dengan penggunaan Codeframe, ini mungkin ternyata tidak efisien secara besar -besaran. Ini bukan masalah saat ini, tetapi mungkin menjadi lebih penting ke depan, pada titik mana kita akan mengatasinya.
Antarmuka pengguna Frontend Codeframe dibangun sebagai komponen torus tunggal, yang merupakan editor Codeframe. Editor ini dapat menjalankan mandiri, seperti halnya dalam tampilan editor layar penuh dari codeframe apa pun, atau dapat disematkan sebagai <iframe> ke situs web tertentu yang diizinkan, seperti di halaman utama. Segala sesuatu yang Anda lihat di frontend, termasuk halaman beranda lainnya, sederhana, HTML tulisan tangan, CSS, dan JavaScript.
Saya memilih Torus untuk membangun frontend karena (1) saya menulis perpustakaan, jadi saya tahu itu luar-dalam dan dirancang agar sesuai dengan selera saya, (2) itu cepat dan ringan, seperti codeframe dirancang untuk menjadi, dan (3) membuat prototyping sangat, sangat cepat; V1.0 Codeframe dibangun dalam 20 jam selama 2 hari, jadi prototipe cepat adalah prioritas sementara hal -hal seperti dukungan untuk browser yang lebih tua bukanlah tujuan inti. Itu juga merupakan kesempatan yang baik untuk membiarkan Torus meregangkan kakinya dan mengujinya dalam pengaturan produksi.
Seluruh editor diimplementasikan dalam satu file JavaScript, di static/js/main.js , yang dapat Anda baca di sini.
Untuk editor teks di dalam codeframe, di browser desktop, saya menggunakan Monaco, editor teks yang dibangun untuk browser dari editor kode Visual Studio Microsoft. Cepat, ramping, dan bekerja dengan sangat baik di browser desktop. Namun, dukungan seluler Monaco masih kurang, jadi pada browser seluler, kami mengirimkan editor yang berbeda, Codemirror. Codemirror digunakan secara luas di Chrome Devtools dan Glitch, di antara alat -alat lain, ringan dan cepat untuk dimuat, dan jauh lebih bermanfaat di browser seluler daripada Monako. Pengalaman menggunakan kedua editor hampir paritas untuk pengalaman dasar, sementara setiap editor membawa beberapa peningkatan fitur yang lebih kecil dari yang lain. Anda dapat membaca tentang bagaimana kami mencapai arsitektur pluggable ini di bagian "Pluggable Editor Backend" di bawah ini.
Panel pratinjau di editor adalah <iframe> sederhana yang membuka tampilan halaman HTML + JS yang dihasilkan untuk codeframe, sehingga Anda dapat melihatnya saat memperbarui langsung. Hari ini, ia beroperasi sepenuhnya secara mandiri dari editor, tetapi di masa depan kami dapat menambahkan beberapa komunikasi di antara keduanya untuk membuat fitur yang lebih mewah mungkin, seperti pembaruan langsung.
Editor Codeframe hanya memiliki ketergantungan inti tunggal: Torus, yang merupakan kerangka kerja UI yang ringan. Untuk kecepatan pengembangan, Codeframe saat ini mengirimkan ketergantungan sebagai tag <script> sederhana dalam editor HTML yang menunjukkan versi terbaru dari paket NPM di UNPG. Di masa depan, kami dapat menggabungkan torus dengan versi yang dikompilasi dari skrip editor kami. Namun sejauh ini, UNPKG telah terbukti cukup dapat diandalkan.
Bagian editor kode Codeframe tidak terkandung dalam basis kode ini. Meskipun ada implementasi referensi dari editor yang sangat telanjang di sini yang diimplementasikan sebagai <textarea> , dalam produksi, seperti yang dijelaskan di atas, Codeframe menggunakan Monako atau Codemirror sebagai editor kode pilihan, tergantung pada klien (browser seluler versus desktop). Kami dapat bergeser dengan mudah dan andal antara ketiga editor ini dan potensi lain di masa depan karena codeframe frontend antarmuka dengan editor melalui set kecil API yang dapat diimplementasikan di sekitar editor kode yang masuk akal. Kami menyebut set API ini antarmuka EditorCore .
Kapal Codeframe dengan pembungkus EditorCore untuk Monako dan Codemirror, dan memilih untuk memuat satu atau yang lain saat runtime tergantung pada klien (jika kami tidak menggunakan editor, tidak ada bagian dari kode editor yang dimuat di browser). Jika kami beralih ke backend editor yang berbeda atau menukar editor dengan yang lain di masa depan, arsitektur pembungkus ini dengan permukaan API kecil membuat ini sangat mudah - beberapa jam paling banyak untuk membungkus antarmuka di sekitar editor baru. Selama pembungkus editor mengimplementasikan antarmuka dengan benar, editor akan bekerja dengan codeframe lainnya.
Codeframe adalah open-source karena dua alasan.
Ke titik kedua, ada banyak sudut codeframe yang kasar dan dapat menggunakan beberapa polesan. Jika Anda seorang pengembang JavaScript yang berpengalaman dan ingin melihat Codeframe meningkat, DM dan PR saya terbuka.
Tetapi yang lebih penting, saya membuat Sumber Terbuka Codeframe dengan niat bahwa pendatang baru untuk pemrograman web akan dapat belajar dari membaca sumber Codeframe. Jika Anda menemukan sedikit kode di repositori yang membingungkan Anda, jangan ragu untuk mengajukan masalah atau menambahkan permintaan tarik untuk penjelasan, klarifikasi, atau kode yang lebih baik.
Bagian penting dari codeframe adalah perpustakaan templat starter yang ramah. Ini adalah set kecil untuk saat ini, tetapi saya ingin menumbuhkan ini menjadi repositori codrame sampel berkualitas tinggi yang memungkinkan orang untuk melompat dan belajar tentang teknologi web baru dengan mudah.
Jika Anda memiliki codeframes atau sampel yang ingin Anda sertakan di halaman depan codeframe sebagai templat starter lain, tambahkan file di bawah starter_fixtures/ dan di dalam const STARTER_FIXTURES di src/models.js , dan file permintaan tarik! Template starter yang diatur dengan cara ini diatur dalam database pada waktu penyebaran, memastikan bahwa setiap versi berjalan dari Codeframe telah diatur.
Salah satu fitur utama dari editor codeframe adalah fitur "Reload As You Type". Artinya, dalam mode default (dengan fitur diaktifkan), editor akan secara berkala memuat ulang panel pratinjau dengan kode dari editor, kadang -kadang di tengah pengetikan. Ini umumnya membuat pengalaman pengeditan yang unggul - tanpa mengganti apa yang kami lakukan, kami dapat melihat hasil kode kami segera saat kami mengedit, dan loop umpan balik yang ketat itu bagus untuk pengembangan.
Namun, dalam kasus -kasus tertentu, terutama ketika menulis JavaScript, ini berarti bahwa pratinjau memuat ulang di tengah pengetikan, ketika kita menulis yang berpotensi tidak valid atau buggy JavaScript. Salah satu perilaku kereta yang mungkin secara tidak sengaja kita muat ulang ke panel pratinjau adalah loop yang tak terbatas. Dalam konteks tertentu, misalnya ketika kita menulis for(){} dan while(){} loop, kita dapat membuat loop tak terbatas di tengah mengetik program kami yang akan dimuat kembali ke jendela pratinjau kami, yang dengan desain menggiling seluruh tab editor hingga HALT, dan mengakibatkan potensi kehilangan data pada edit yang dibuat di editor.
Codeframe bukan editor pertama yang mengalami hal ini, dan codepen.io memiliki pendekatan yang menarik untuk instrumen JavaScript dalam pengaturan pemuatan langsung untuk mencegah perilaku ini. Masalahnya menantang karena mencegah loop tak terbatas dalam kasus umum tidak mungkin - ini adalah varian klasik dari masalah penghentian. Dalam kasus Codepen, mereka instrumen kode JavaScript yang dihasilkan, sehingga ketika loop yang sama berjalan terus menerus selama lebih dari beberapa periode waktu atau iterasi, ia menghentikan loop. Ini adalah solusi pragmatis, meskipun tidak masuk akal. Glitch, sebaliknya, tidak melakukan apa pun untuk mencegah loop tak terbatas dalam pengaturan pemuatan ulang langsung.
Saya telah menemukan bahwa, dalam praktiknya, cukup jarang secara tidak sengaja menulis kode javascript sintaks-valid yang juga menghasilkan loop tak terbatas. Dan untuk kasus-kasus yang jarang terjadi, codeframe memiliki opsi untuk menonaktifkan reloading tipe-Anda di editor. Tetapi secara default, codeframe mengikuti prioritas Glitch dalam tidak memodifikasi atau instrumen JavaScript untuk mencegah eksekusi yang tak terbatas. Jika kita mengalami lebih banyak kasus penggunaan di mana ini menjadi masalah, kita dapat meninjau kembali masalah ini.
Efek samping yang rapi dari kesederhanaan kode yang dapat Anda tulis pada codeframe (tidak ada langkah kompilasi, tidak ada bundling) adalah bahwa output yang Anda dapatkan di halaman HTML pratinjau adalah kode yang Anda ketik pada editor, ditambah beberapa kode html pembungkus. Jadi, alih -alih secara eksplisit menambahkan tombol "Ekspor" atau item menu, pengguna dapat dengan mudah membuka pratinjau dan menyimpan dokumen HTML itu sendiri untuk "mengekspor" setiap codrame yang telah mereka buat.
Jika Anda menikmati menggunakan codeframe dan ingin mendukung apa yang saya buat ke depan, silakan pertimbangkan untuk memberikan donasi untuk codeframe melalui PayPal atau Venmo.
Atau, harap pertimbangkan untuk menyumbang untuk beberapa organisasi nirlaba terbaik yang melakukan pekerjaan hebat di ruang pendidikan CS, Khanacademy, Hack Club, dan Stutech.
