Yahoo! User Interface Blog (YUIBlog)

YUI: Buka Jam Kam Mei 24

YUIDoc Pembaruan dan Travis CI Integrasi

Dengan rilis terbaru dari YUIDoc dan baru-baru posting di YUI mendapatkan tes yang berjalan pada Travis CI , sepertinya saat yang tepat untuk ngobrol dan Q & A dengan Dav. Bukan berarti ada waktu yang buruk untuk mengobrol dengan Dav.

Waktu & Detail

Kami akan online pada Kamis 10:00-11:00 PDT.

Kita akan kembali menggunakan Adobe Connect minggu ini karena resolusi siaran dari Hangouts Google + on Air agak rendah, dan kami ingin chatting menjadi lebih mudah diakses untuk non-pengguna IRC. Marilah kita tahu jika Anda setuju atau tidak setuju di komentar.

Rekaman

Rekaman ini tersedia di YUILibrary saluran YouTube .

Temukan percakapan: Bloglines | technorati

Berbagi dan memperpanjang: Bookmark dengan del.icio.us | digg it! | reddit!

YUI dan Travis duduk di pohon git-

Selama beberapa minggu terakhir, saya telah menghabiskan banyak waktu mendapatkan inti YUI tes mengeksekusi pada Travis CI . Pada hari ini, setiap dorongan untuk kami 3 YUI repo pada hasil GitHub di lebih dari 6.000 (6053 tepatnya) unit test dieksekusi dan dicatat. Tes ini meliputi 1.130 JavaScript hanya kami tes unit pelaksana inti native dalam Node.js pada versi 0.4.x dan 0.6.x (0.7.x dengan dukungan yang akan ditambahkan segera). Kami mengikuti dengan satuan penuh suite kami uji (4923 tes), berjalan dengan baris perintah saya YUITest / PhantomJS wrapper, Grover .

Hari ini saya ingin bercerita sedikit tentang bagaimana dan mengapa kita melakukan hal ini.

Mengapa?

Untuk beberapa lama, tes kami dan membangun merupakan misteri bagi pengguna kami. Mereka semua yang terjadi di balik pintu tertutup dan tak seorang pun benar-benar tahu apa yang kami lakukan. Selama beberapa tahun terakhir, kami mulai menambahkan lebih dan lebih dari pengujian kami ke pohon sumber kami, sehingga orang dapat melihat apa yang kita secara aktif pengujian. Ini membantu sedikit, tetapi tidak menunjukkan bahwa kita menjalankan setiap tes pada setiap membangun dan bahwa jika tes gagal, kita jangan memaksakan yang membangun untuk GitHub.

Kemudian datang Travis CI, sumber terbuka terus menerus integrasi platform yang kait langsung ke GitHub. Aku bermain-main dengan itu untuk sehari dan segera mulai bergerak pengujian kami sekitar sehingga kita bisa menggunakannya. Kami ingin menjadi lebih transparan dalam proses dan memungkinkan masyarakat untuk melihat apa yang kita menguji dan bagaimana kita melakukannya.

Satu hal yang kita ingin menambahkan untuk proses ini adalah akses ke laporan cakupan kami saat ini kode. Saat ini, kami menjalankan laporan cakupan kode setiap hari dari tes dilaksanakan di FF12, Chrome terbaru-dan IE8, tetapi tidak ada pengguna kami dapat melihat bahwa kita berada pada ~ 80% meliputi:

Kami bekerja sangat keras untuk memperbaiki masalah ini dan mudah-mudahan mendapatkan data ini di tempat terbuka untuk semua orang untuk melihat.

Bagaimana?

Saya harus melakukan perubahan minimal untuk test suite inti kami untuk mendapatkan mereka untuk berjalan di bawah Node.js di Travis CI. Dengan "suite inti test", maksud saya setiap modul YUI yang dapat mengeksekusi tanpa memerlukan DOM bekerja. Ini mencakup, namun tidak terbatas pada: YUI Core, Loader, YQL, Y.Array, Y.Object, dll Modul ini semua di dalam sempurna yang dapat digunakan Node.js tanpa modifikasi.

Mari kita lihat di tes YQL sebagai contoh.

Yang saya lakukan adalah membuat wrapper Node.js mirip dengan pembungkus tes standar yang kita gunakan pada browser dan termasuk tes yang sama persis yang sedang dieksekusi di browser.

Berikut adalah wrapper modul YQL ini:

Sekarang, ini modul pengujian yang sama dapat dijalankan pada browser dan Node.js tanpa modifikasi!

Peringatan?

Agar tes ini untuk berjalan secara native di Node.js, mereka perlu untuk tidak berinteraksi dengan DOM. Sebagai contoh, Y.Array terdiri dari metode pembantu untuk menangani Array dalam JavaScript. Tapi ada beberapa tes yang mencakup berurusan dengan elemen DOM untuk memastikan bahwa metode pembantu mengembalikan nilai benar. Untuk tes ini, saya harus memindahkan kode DOM terkait ke dalam tes baru dan menambahkan tes yang ke daftar tes diabaikan ketika Y.UA.nodejs terdeteksi. Dengan cara ini, tes tersebut diabaikan dalam Node.js, tapi masih berjalan di browser.

Berikut ini contohnya:

Seperti yang Anda lihat, relatif mudah untuk membuat tes kami berjalan di kedua lingkungan untuk memastikan bahwa kode kita stabil dan berfungsi penuh ketika digunakan dalam Node.js seperti di browser.

Apa Grover?

Grover adalah alat baris perintah yang memungkinkan Anda untuk melaksanakan YUITest berbasis tes di PhantomJS. PhantomJS adalah contoh WebKit tanpa kepala yang memungkinkan Anda untuk membuat halaman HTML tanpa kehadiran GUI. Jadi Grover menutup kesenjangan ini dan memungkinkan Anda untuk menjalankan tes unit kami dari dalam baris perintah dari suatu sistem CI seperti Travis.

Grover adalah gratis dan tersedia melalui: npm install -g grover (. Anda harus memiliki biner PhantomJS diinstal sebelum menggunakan Grover)

Bagaimana kita melihat semua ini?

Travis CI memberikan laporan penuh membangun sebelumnya, serta informasi status up-to-date. Di bawah ini adalah link ke proyek-proyek kami saat ini host pada Travis CI:

• YUI 3
• YUIDoc
• Yeti
• Grover

Berikut ini adalah potongan kecil dari apa yang kita keluaran membangun tampak seperti (dari sejarah membangun untuk repo yui3 ):

Apa lagi gunanya?

Kami berusaha keluar Travis / GitHub fitur baru Tarik Permintaan pada semua proyek kami. Ini berarti bahwa setiap kali pengembang mengajukan Permintaan Tarik kepada kami, Travis secara otomatis akan menarik kode mereka, bergabung ke master (pada server mereka) dan menjalankan satuan penuh kami test suite menentangnya. Mereka "Bot Travis" secara otomatis akan mengirim komentar kembali ke Permintaan Tarik mengatakan pengembang apakah patch mereka lulus tes nya.

Berikut ini adalah contoh dari pengalihan Permintaan Tarik:

Dan satu di mana ia gagal:

Apa yang berikutnya

Kami berencana untuk menambahkan dukungan untuk melaksanakan tes kami dengan Yeti secepat itu menjadi cukup stabil untuk berjalan di masing-masing membangun. Kami juga melihat ke dalam menyebarkan kode kita angka cakupan juga. Selain itu, jangan ragu untuk memberitahu kami dalam apa cara lain kita bisa lebih terbuka daripada kita sekarang.

Aku, misalnya, sangat senang dengan semua fitur baru dan saya harap Anda juga!

Temukan percakapan: Bloglines | technorati

Berbagi dan memperpanjang: Bookmark dengan del.icio.us | digg it! | reddit!

YUI 3.6.0 PR1 Apakah Sekarang Tersedia

Kami sangat senang mengumumkan ketersediaan YUI 3.6.0 PR1 untuk pengujian masyarakat dan umpan balik. Mohon luangkan waktu untuk memeriksanya melalui CDN atau Download .

Berikut adalah tanggal target untuk semua 3.6.0 tonggak YUI:

• PR1 - 8 Mei 2012
• PR2 - 12 Juni 2012
• PR3 - 17 Juli 2012
• GA - 31 Juli 2012

Gambaran dari barang yang kami kerjakan untuk YUI 3.6.0 meliputi:

• Scrollview perangkat tambahan
• DataTable fitur dan peningkatan kinerja
• Grafik perbaikan bug
• Gambar preview fitur di Uploader
• Popup Kalender
• YUI benih dan global refactored untuk kinerja

Kami juga mengambil langkah untuk menyingkat siklus pengembangan kami sehingga kami dapat transisi ke rilis bulanan dalam waktu dekat.

Daftar isu yang dibahas dalam 3.6.0 PR1 dan daftar lengkap masalah yang ditargetkan untuk 3.6.0 tersedia dalam pelacak bug kami.

Kami mengundang Anda untuk bergabung dengan diskusi pembangunan berkelanjutan terjadi dengan tim di atas pada GitHub.

Kami berharap dapat umpan balik dengan terus!

Temukan percakapan: Bloglines | technorati

Berbagi dan memperpanjang: Bookmark dengan del.icio.us | digg it! | reddit!

YUIDoc 0.3.0 adalah Resmi!

Hari ini kami senang untuk mengumumkan rilis resmi baru YUIDoc , JavaScript pembangkit dokumentasi kami. YUIDoc adalah Node.js aplikasi yang menghasilkan dokumentasi API dari komentar dalam sumber, dengan menggunakan sintaks mirip dengan tool seperti javadoc dan Doxygen. YUIDoc saat ini powering dokumentasi API untuk YUI dan telah aktif diperbarui selama setahun terakhir .

[Lihat Gambar lebih besar]

YUIDoc menyediakan:

• Hidup preview. YUIDoc termasuk server doc mandiri, sehingga sepele untuk melihat dokumen Anda ketika Anda menulis.
• Dokumentasi modern markup YUIDoc itu. Yang dihasilkan adalah, menarik aplikasi web fungsional dengan URL nyata dan fallbacks anggun untuk laba-laba dan unsur lain yang tidak dapat menjalankan JavaScript.
• Bahasa dukungan luas. YUIDoc pada awalnya dirancang untuk proyek YUI, tetapi tidak terikat pada perpustakaan tertentu atau bahasa pemrograman. Anda dapat menggunakannya dengan bahasa yang mendukung /* */ komentar blok.

Beberapa fitur baru ditambahkan ke versi ini adalah:

• Penurunan harga dukungan dalam komentar kode
• Dukungan untuk banyak tag lebih dari kotak
• Logika dipisahkan untuk memungkinkan untuk diperpanjang mudah
• Lebih baik dukungan theming
• Server modus untuk preview waktu pengembangan
• Data eksternal pencampuran
• Mudah instalasi platform silang
• Silang dalam dan keluar dari proyek ini
• JSON konfigurasi berbasis

Mari kita masuk ke sedikit lebih detail pada beberapa dari ini:

Sederhana Instalasi

Jika Anda memiliki Node.js dan NPM diinstal, instalasi mudah:

  NPM-g install yuidocjs 

Penurunan harga dukungan dalam komentar kode

YUIDoc akan mengurai komentar anda dengan penurunan harga sebelumnya itu berlaku template Setang memberikan Anda fleksibilitas yang besar saat menulis Anda docs.

Logika dipisahkan untuk memungkinkan untuk diperpanjang mudah

YUIDoc menggunakan infrastruktur kelas YUI internal dan ekspor semua modul ketika Anda require yang yuidocjs modul. Hal ini memungkinkan pengguna akhir untuk menghubungkan ke internal YUIDoc dan mengubah cara melakukan sesuatu. Anda dapat memperpanjang kelas, menambah mereka atau hanya flat out metode perubahan untuk suite kebutuhan Anda.

Lebih baik dukungan theming

Dalam rilis ini kita menggunakan built-in Y.Handlebars pembantu untuk menangani semua generasi template. Kami juga telah diambil pengembangan menjadi pertimbangan ketika membangun fitur ini. YUIDoc pertama akan mencari itu dibangun dalam direktori tema untuk parsial, maka akan mencari direktori tema lokal Anda. Hal ini memungkinkan Anda untuk hanya harus menjaga file yang ingin Anda ubah dalam tema Anda dan tidak harus menyalin setiap parsial bahkan jika Anda tidak memodifikasi itu.

Server modus untuk preview waktu pengembangan

Ini adalah fitur favorit baru saya! Anda bisa jalankan YUIDoc dalam mode server dan akan memberikan preview langsung dari dokumentasi Anda seperti yang Anda mengeditnya. Cukup simpan file Anda dan kembali halaman tersebut dari built di server dan melihat perubahan hidup. Termasuk data eksternal dan cross-linking. Anda tidak lagi harus menghasilkan dokumentasi untuk seluruh proyek Anda hanya untuk melihat perubahan dokumentasi!

Data eksternal pencampuran

YUIDoc sekarang memungkinkan Anda untuk link dokumentasi Anda ke output diberikan dari contoh lain YUIDoc. Sebagai contoh, jika proyek Anda menggunakan YUI dan memperluas beberapa kelas inti kami, Anda dapat link ke kami diekspor data.json file (dari kami YUIDoc membangun) dan ketika YUIDoc mengurai dokumentasi Anda akan mengambil data dan lintas-link semua Anda diperpanjang kembali ke kelas kita. Dengan cara ini Anda tidak perlu mendokumentasikan kode lain proyek, Anda cukup mengarahkan ke mereka docs seperti itu adalah bagian dari Anda.

Proyek Perubahan

Semua pengembangan YUIDoc masa depan akan sepenuhnya dilakukan pada Github. Kami akan melacak proyek di wiki mereka dan menggunakan mereka untuk mengelola isu-isu tiket kami. Ini akan dijalankan seperti proyek Node.js asli benar-benar di tempat terbuka. Kami juga akan menggunakan Grup Google untuk permintaan dukungan, jadi mendaftar hari ini !

Kami juga senang melaporkan bahwa tes unit YUIDoc yang di-host pada Travis-CI dan akan berjalan per dorongan Github!

• Sumber
• Dokumentasi
• API Docs
• Google Group
• Travis-CI

Bagaimana dengan versi lama YUIDoc?

Sumber Python tua untuk YUIDoc berada dalam cabang di repo Github saat ini di mana itu akan tetap tanpa batas. Tidak ada rencana pada menerima permintaan tarik atau membuat update dengan basis kode.

Temukan percakapan: Bloglines | technorati

Berbagi dan memperpanjang: Bookmark dengan del.icio.us | digg it! | reddit!

YUI: Buka Jam Kam Mei 10

YUI 3.5.0 Uploader

Uploader adalah komponen lain yang melihat upgrade besar dalam 3.5.0. Dari banyak perubahan, salah satu besar adalah penambahan dukungan untuk fitur asli di browser yang mendukung HTML5.

Bergabunglah dengan kami untuk diskusi dengan penulisnya, Allen Rabinovich , di mana kita akan berbicara tentang bagaimana Uploader terstruktur, beberapa tantangan dengan teknik modern yang perlu ditangani, dan apa yang ada di peta jalan untuk versi yang akan datang.

Waktu & Detail

Kami akan online pada Kamis 10:00-11:00 PDT.

Minggu ini, kita akan mencoba Google Ditambah Hangouts di udara, sehingga audio dan video feed akan melalui G +, dan kami akan memantau chatting di yang # yui IRC channel di freenode .

Lihat Recording

Temukan percakapan: Bloglines | technorati

Berbagi dan memperpanjang: Bookmark dengan del.icio.us | digg it! | reddit!

Mengumumkan YUI 3.5.1

Kami sangat senang mengumumkan ketersediaan YUI 3.5.1 pada CDN atau sebagai Download . YUI 3.5.1 adalah rilis scoped lebih kecil dari perbaikan bug saja.

Nikmatilah!

Temukan percakapan: Bloglines | technorati

Berbagi dan memperpanjang: Bookmark dengan del.icio.us | digg it! | reddit!

Menampilkan Kontrol dalam DataTable: Tinjauan Sebuah

Baru-baru ini, ada pertanyaan di forum tentang menggunakan field input dalam sebuah DataTable. Dengan menekan terus menerus untuk membangun aplikasi semakin kompleks di browser, saya memutuskan bahwa gambaran dari pilihan yang tersedia untuk mengedit data tabular mungkin berguna.

Cara paling mudah untuk mengedit data akan menggunakan editing inline, tapi ini belum tersedia di YUI 3 DataTable. Sementara itu, salah satu pilihan adalah untuk roll bidang jadi masukan langsung dalam sel tabel, mirip dengan contoh ini .

Jika Anda tidak ingin menyimpan setiap perubahan ketika itu terjadi, Anda bisa menggunakan QuickEdit modul galeri gantinya. Hal ini memungkinkan Anda mengedit semua sel terlihat dan kemudian menyimpan perubahan dalam satu operasi.

Solusi di atas modal. Jika Anda lebih memilih cara non-modal untuk mengedit semua sel, Anda bisa menggunakan Editor Massal widget. Ini bekerja dengan pagination, sehingga Anda dapat menyimpan semua perubahan di semua halaman tabel dalam satu operasi. Bahkan memungkinkan Anda dengan mudah menambah dan menghapus baris - dan bahkan bila Anda menggunakan remote DataSource!

Editor Massal tidak dibangun di atas YUI DataTable, namun. Jika Anda membutuhkan fitur lain dari YUI DataTable, Anda bisa menggunakan Plugin negara pelestarian untuk YUI 3 DataTable. Hal ini juga bekerja dengan pagination, sehingga Anda dapat menyimpan semua nilai pada semua halaman dalam satu operasi, tetapi tidak dirancang untuk memungkinkan Anda dengan mudah menambahkan atau menghapus baris.

Para Plugin pelestarian negara juga berguna jika Anda ingin melakukan sesuatu yang sederhana seperti menampilkan kotak centang untuk memilih baris dalam sebuah tabel.

Alasan untuk semua solusi berbeda adalah bahwa teknik trade-off yang cukup kompleks, sehingga tidak dianjurkan untuk membangun wastafel dapur solusi tunggal untuk mendukung semua fitur di atas. Semoga ikhtisar ini akan membantu Anda memilih modul yang tepat untuk mengatasi besar berikutnya Anda berbasis tabel aplikasi.

Tentang Penulis: John Lindal ( @ jafl5272 di Twitter) adalah salah satu insinyur utama membangun fondasi dimana Yahoo! APT dibangun. Sebelumnya, bekerja di Jaringan Penerbit Yahoo!.

Temukan percakapan: Bloglines | technorati

Berbagi dan memperpanjang: Bookmark dengan del.icio.us | digg it! | reddit!