milo

Milo

Pemrograman reaktif browser/nodeJS dan manipulasi DOM yang digerakkan data dengan komponen modular.

Dokumentasi: http://milojs.github.io/milo/

Awal yang cepat

Memasang

 npm install milojs

atau

 bower install milo

Tes

 npm install
npm install -g grunt-cli
grunt test

Untuk menjalankan semua tes, termasuk tes browser:

 grunt tests

Mencoba

index.html

 < html >
< head >
    < title > Binding example </ title >
    < script src =" milo.bundle.js " > </ script >
    < script src =" index.js " > </ script >
</ head >
< body >
    < input type =" text " ml-bind =" [Data]:myField " >
    < div ml-bind =" [Data]:myCurrentValue " > </ div >
    < button ml-bind =" [Events]:myTestButton " >
    	Test
    </ button >
    < div >
    	< span ml-bind =" :myTestValue " > </ span >
    </ div >
    < div >
      < h2 > I am connected: </ h2 >
      < span ml-bind =" [Data]:myTestValue2 " > </ span >
    </ div >
</ body >
</ html >

index.js

 // run when DOM is ready
milo ( function ( ) {
    // create and bind components with milo.binder
    var scope = milo . binder ( ) ;

    // attach subscriber to data change event via data facet
    // of myField component
    scope . myField . data . on ( '' , function ( msg , data ) {
    	scope . myCurrentValue . data . set ( data . newValue ) ;
      // alternatively:
      // scope.myCurrentValue.el.innerHTML = data.newValue;
    } ) ;

    // attach subscriber to click event via events facet
    // of myTestButton component
    scope . myTestButton . events . on ( 'click' , function ( msg , event ) {
    	scope . myTestValue . el . innerHTML = scope . myField . data . value ( ) ;
    } ) ;

    // connect two components directly via their data facets
    // using milo.minder
    milo . minder ( scope . myField . data , '->' , scope . myTestValue2 . data ) ;
} ) ;

Catatan tentang Pemeriksaan Jenis Parameter Runtime

Milo menggunakan modul centang ( milo.util.check - Forked dari Paket Periksa Kerangka Meteor) untuk memeriksa runtime jenis parameter. Sangat disarankan untuk mematikan cek ini dalam produksi menggunakan: milo.config({ check: false }) .

Bergantung pada aplikasi Anda, itu dapat meningkatkan kinerja lebih dari dua kali.

Sampel/tutorial

Memulai

Pengantar Binding

Pengantar Sisi Data

Pengantar Utusan

Pengantar model

Pengantar Minder

Pengantar daftar

Artikel tentang Membuat Milo Menggulung Kerangka Anda Sendiri Di Tuts+

TODOMVC

Sampel yang lebih maju adalah aplikasi Todos di folder TODOMVC.

Menyumbang

 cd $MILO_FOLDER
npm link

cd $MY_PROJECT
rm -R -f -d node_modules/milojs
npm link milojs # link milo to your current project to use with browserify

cd $MILO_FOLDER
grunt # rebuild milo bundle every time you change any .js file

Selain itu, Anda dapat menyiapkan Grunt dalam proyek Anda untuk membangunnya kembali setiap kali Milo bundel berubah.

Pastikan Anda menjalankan grunt tests sebelum melakukan (bukan hanya grunt test yang dijalankan oleh Travisi secara otomatis) - itu akan menjalankan semua tes, termasuk tes browser.

Konsep

Desain Modular

Meskipun Milo dikemas sebagai satu bundel, ia memiliki struktur yang sangat modular. Ini terdiri dari beberapa modul independen yang dapat digunakan bersama atau secara terpisah dan yang dirancang untuk menyederhanakan tugas aplikasi umum daripada membuat struktur aplikasi tertentu.

Beberapa modul dalam MILO hanya dapat digunakan di browser (Component, ComponentFacet, Milo.Binder), beberapa di browser dan di NodeJs (Messenger dan kelas terkait, model, konektor, Milo.minder).

Milo sendiri menggunakan Browserify untuk mengemas bundel, tetapi sistem modul apa pun dapat digunakan dalam aplikasi yang menggunakan Milo - Milo tidak menyarankan struktur aplikasi apa pun.

Komponen

Komponen dirancang untuk menyederhanakan manajemen DOM. Komponen dilampirkan ke elemen DOM tertentu. Melampirkan beberapa komponen ke elemen DOM yang sama biasanya merupakan kesalahan desain aplikasi (atau milo), jadi jika itu terjadi kesalahan akan dicatat ke konsol.

Komponen memungkinkan pembuatan subkelas yang sangat mudah yang didefinisikan sebagai kumpulan "segi" yang dikonfigurasi. Misalnya, lihat definisi komponen UI MLSelect.

Ada templat komponen untuk menyederhanakan pembuatan komponen Anda sendiri.

Lihat Dokumentasi Komponen.

Facet Komponen

ComponentFacet adalah kelas dasar, subkelas dari metode kelompok mana yang terkait dengan perilaku komponen.

Anda jarang perlu membuat instantiate segi - saat komponen dibuat, ia menciptakan semua fasetnya

Ada segi berikut yang ditentukan dalam Milo :

• Wadah - Sisi khusus yang menciptakan ruang lingkup komponen
• DOM - Koleksi Metode Pembantu Menyederhanakan Manipulasi DOM Elemen Komponen
• Acara - Memberikan API yang nyaman untuk berlangganan acara DOM
• Data - API untuk memanipulasi pohon DOM di dalam elemen komponen sebagai data, memungkinkan kedua mendapatkan/pengaturan data terstruktur dari/ke banyak elemen DOM sekaligus dan membuat koneksi data reaktif model (lihat di bawah) ke DOM.
• Daftar dan Item - Izinkan membuat daftar di DOM dari Arays di data Anda. Kelas komponen menggunakan salah satu segi ini memerlukan facet data (akan ditambahkan secara otomatis) yang harus digunakan untuk mendapatkan/mengatur daftar data dan untuk membuat koneksi data reaktif.
• Template - Menyederhanakan rendering elemen DOM komponen dari template.
• CSS - memungkinkan Anda untuk mengikat data DOM, atau model ke kelas CSS menggunakan aturan deklaritif dalam konfigurasi facet.
• Frame - Mengelola mengirim/menerima pesan ke/dari iframe.
• Drag - Memungkinkan manajemen elemen DOM yang dapat diseret dengan mudah.
• Drop - membantu membuat target drop.
• Model - Pembungkus sederhana untuk model Milo (lihat di bawah), membantu menyimpan data pada komponen.

Ada template facet komponen untuk menyederhanakan pembuatan segi Anda sendiri. Semua aspek komponen harus berupa subkelas dari ComponentFacet.

Dom mengikat dan membuat instance komponen

Contoh komponen Anda biasanya dibuat secara otomatis ketika Anda menghubungi Milo.binder berdasarkan informasi tentang kelas komponen, aspek, dan nama komponen dalam atribut ml-bind (dapat diubah melalui Milo.config).

Untuk membuat komponen Anda tersedia untuk Milo, kelas mereka harus terdaftar di Registry Komponen (Milo.Registry.components). Jika Anda mendefinisikan aspek baru, kelas mereka juga harus terdaftar (di Milo.Registry.facets).

Karena mendaftarkan komponen dan kelas segi biasanya terjadi dalam modul yang sama (file) yang mendefinisikan kelas, Anda harus menjalankan modul ini. Jika Anda menggunakan Broserify untuk manajemen modul, itu sudah cukup untuk menggunakan:

 require('my_component');

dalam modul lain yang dieksekusi atau diperlukan.

Kurir

MILO memasok kelas pesan internal yang juga dapat digunakan untuk kebutuhan aplikasi. Semua aspek di Milo memiliki contoh messenger yang melekat padanya yang mendefinisikan pesan pesan khusus untuk segi, dalam kebanyakan kasus yang menghubungkan ke beberapa sumber eksternal (biasanya peristiwa DOM).

Instance Messenger menggunakan instance dari subkelas MessageSource untuk terhubung ke sumber eksternal dan instance subclass MessengerAPI untuk membuat pesan internal tingkat yang lebih tinggi dan mengubah data pesan. Arsitektur ini memungkinkan pembuatan fungsionalitas canggih hanya dalam beberapa baris kode.

Lihat Dokumentasi Messenger.

Model

Milo mendefinisikan model untuk memungkinkan akses yang aman ke data tanpa perlu khawatir apakah data ditetapkan (tidak pernah melempar ketika Anda mengakses data ketika Anda mendapatkan properti objek yang tidak ditentukan) dan untuk memungkinkan kemungkinan untuk berlangganan perubahan data yang mirip dengan objek eksperimental.

Menggunakan model tidak memerlukan API ini, dan tidak seperti API ini memungkinkan berlangganan perubahan pada properti model Anda ke kedalaman apa pun.

Lihat Demo Model dan Dokumentasi Model.

Konektor

Milo mendefinisikan kelas ini untuk mengelola koneksi reaktif antara objek yang menerapkan API pesan data. Kedua contoh segi data dan model adalah objek tersebut.

Anda dapat membuat koneksi satu atau dua arah, menentukan kedalaman struktur data Anda yang ingin Anda amati, matikan koneksi ini, misalnya ketika Anda ingin membuat banyak perubahan model tanpa menyebabkan pembaruan DOM.

Koneksi ini tidak memiliki overhead membandingkan data dalam loop seperti angularjs dan tidak menyebabkan degradasi kinerja ketika banyak objek yang terhubung ada.

Contoh konektor segera akan mendukung terjemahan struktur yang memungkinkan menciptakan koneksi reaktif antara model dengan struktur tetap dan pohon DOM dengan struktur yang fleksibel.

Satu atau beberapa koneksi reaktif dapat dibuat dengan Milo.Minder.

Lihat Dokumentasi Konektor.

Tampilan dan Manajemen Aplikasi

• Milo.Loader - Memuat subview ke dalam halaman.
• MILO.MAIL - Applicaiton Level Messenger yang juga mendefinisikan acara domready dan menyederhanakan perutean pesan antara iframes (lihat bingkai facet).
• Milo.config - Mengkonfigurasi Pengaturan Milo .

Utilitas

• Periksa - periksa tipe parameter (bercabang dari paket periksa kerangka meteor).
• Logger - Logger yang dapat dikonfigurasi dengan level log.
• Permintaan - Perpustakaan Permintaan HTTP.
• DOM - PERPUSTAKAAN UNTUK MANIPULASI ESLEMEN DOM.

Mengapa Milo?

Nama Milo dipilih karena Milo Minderbinder, seorang pencatut perang dari Catch 22. Setelah mulai dari mengelola operasi kekacauan, ia memperluas mereka menjadi perusahaan perdagangan yang menguntungkan, yang menghubungkan semua orang dengan segalanya, dan dalam Milo dan semua orang "memiliki bagian".

MILO Kerangka kerja memiliki pengikat modul, yang mengikat elemen DOM dengan komponen (melalui atribut-ikatan ML khusus), dan Module Minder yang memungkinkan membangun koneksi langsung langsung antara sumber data yang berbeda (model dan segi data komponen adalah sumber data tersebut).

Secara kebetulan, Milo dapat dibaca sebagai akronim dari Mail Online .

Bukankah ada cukup kerangka browser?

Semua kerangka kerja yang dapat kita letakkan adalah terlalu primitif meninggalkan kita untuk menulis terlalu banyak kode sendiri (jQuery, tulang punggung) atau terlalu membatasi, dengan sihir yang cukup untuk membangun aplikasi sederhana dengan sangat cepat tetapi dengan kontrol terbatas atas fungsi kerangka kerja yang tepat (Angular, ext).

Yang selalu kami inginkan adalah kerangka kerja yang memungkinkan

• Mengembangkan aplikasi dengan cara deklaratif dengan binding model reaktif untuk melihat
• Membuat ikatan data reaktif antara berbagai model dalam aplikasi untuk mengelola perambatan data dalam deklaratif daripada dalam gaya imperatif
• Memasukkan validator dan penerjemah dalam binding ini, sehingga kami dapat mengikat tampilan ke model data daripada melihat model seperti di angularjs.
• Kontrol yang tepat atas komponen yang terkait dengan elemen DOM.
• fleksibilitas tampilan manajemen yang memungkinkan keduanya secara otomatis memanipulasi DOM pada perubahan model dan untuk membuat ulang beberapa bagian menggunakan __ mesin templating __ dalam kasus di mana rendering lebih efisien daripada manipulasi DOM
• Kemampuan untuk membuat UI secara dinamis
• Mampu menghubungkan ke dalam mekanisme di balik reaktivitas data dan secara tepat mengontrol pembaruan tampilan dan aliran data
• Mampu memperluas fungsionalitas komponen yang disediakan oleh kerangka kerja dan membuat komponen baru.

Kami tidak dapat menemukan kerangka kerja seperti itu sehingga kami mulai mengembangkan MILO secara paralel dengan aplikasi yang menggunakannya.

Arsitektur

### Prototipe Berbasis warisan

Milo mengandalkan prototipe JavaScript untuk membangun blok kerangka kerja.

JavaScript adalah bahasa yang sangat dinamis. Ini memungkinkan fungsi penulisan yang membuat kelas ( Component.createComponentClass ) yang memungkinkan untuk mengimplementasikan pola komposisi di mana setiap kelas komponen dibuat sebagai kumpulan blok yang telah ditentukan (segi) dengan konfigurasi segi yang spesifik untuk kelas yang dibangun (ia memiliki beberapa kesamaan dengan komponen ext, meskipun tidak dibuat dari blok).

Kode run-time "generasi"

JavaScript juga memungkinkan untuk membuat fungsi konstruktor yang membuat fungsi memungkinkan sintaks yang sangat ekspresif untuk objek model dan juga "kompilasi" run-time dari jalur akses model ke dalam fungsi.

Objek faceted

Kelas komponen didasarkan pada kelas FacetedObject abstrak yang dapat diterapkan ke domain apa pun di mana objek dapat diwakili melalui pengumpulan segi (segi adalah objek dari kelas tertentu, ia memegang konfigurasi, data, dan metode sendiri).

Di satu sisi, pola segi adalah inversi pola adaptor - sementara yang terakhir memungkinkan menemukan kelas/metode yang memiliki fungsionalitas spesifik, objek faceted hanya dibangun untuk memiliki fungsionalitas ini. Dengan cara ini dimungkinkan untuk membuat kelas komponen yang hampir tidak terbatas dengan jumlah blok bangunan yang sangat terbatas tanpa memiliki hierarki kelas yang tinggi - sebagian besar komponen mewarisi langsung dari kelas komponen.

Pada saat yang sama, Milo mendukung mekanisme warisan ketika subkelas dapat menambahkan segi pada yang sudah berada di superclass dan untuk mendefinisikan kembali konfigurasi segi yang diwariskan.

Mixin

Kami juga menggunakan pola mixin, tetapi mixin di Milo diimplementasikan sebagai objek terpisah yang disimpan pada properti objek host dan dapat membuat metode proxy pada objek host jika diperlukan. Kelas Messenger, MessageSource dan DataSource adalah subclass dari kelas abstrak Mixin.

Pendaftar: Inversi Ketergantungan

Komponen dan aspek mendaftarkan diri mereka dalam pendaftar yang memungkinkan untuk menghindari mengharuskan mereka dari satu modul. Ini mencegah ketergantungan melingkar antar modul.

Dependensi

Ketergantungan Milo adalah proto , perpustakaan manipulasi objek dan DOT , mesin templating (keduanya termasuk dalam bundel Milo).

Tidak ada jQuery, zepto, dll.

Kami tidak menggunakan perpustakaan dom traversal apa pun karena:

• Dom API jauh lebih cepat (dalam beberapa kasus 30 kali lebih cepat)
• Kami tidak ingin kode kompatibilitas browser menjadi bagian dari kerangka kerja. Jika diperlukan untuk beberapa aplikasi, itu dapat diimplementasikan dengan polyfill. Kami dapat mengembangkannya untuk Milo jika kami membutuhkannya, tetapi jangan ragu untuk berkontribusi.
• Waktu mulai aplikasi lebih cepat

Sebaliknya, komponen MILO dapat memiliki dom facet yang mencakup beberapa fungsi kenyamanan untuk memanipulasi elemen DOM dan ada milo.util.dom - koleksi fungsi serupa yang dapat digunakan tanpa komponen.

Tidak ada garis bawah, lo-dash, dll.

Milo menggunakan proto perpustakaan yang memiliki koleksi fungsi utilitas yang dipenuhi untuk manipulasi objek, prototipe, array, fungsi dan string. Silakan lihat repositori untuk dokumentasi dan alasan di balik keputusan untuk tidak menggunakan perpustakaan pihak ketiga.

Ini dibundel bersama dengan Milo dan semua fungsinya tersedia sebagai properti objek _ , Anda tidak perlu memuatnya secara terpisah.

Lisensi

http://opensource.org/licenses/bsd-2-clause

Mengubah log

Lihat rilis