Apa yang dimaksud dengan alur kerja yang beresonansi untuk mendesain webapps?

9

Sudah lama sejak saya telah melakukan pengembangan web yang substansial dan saya ingin mengambil keuntungan dari praktik-praktik terbaru tapi saya berjuang untuk memvisualisasikan alur kerja untuk menggabungkan semuanya.

Inilah yang ingin saya gunakan:

  • Kerangka CakePHP
  • jsmin (JavaScript Minify)
  • SASS (StyleSheets Luar Biasa Secara Sintaksis)
  • Git

CakePHP:

Cukup jelas, buat modifikasi dan perbarui sumbernya.

jsmin:

Saat Anda memodifikasi skrip, apakah Anda menjalankan jsmin secara manual untuk mengeluarkan kode minified yang baru, atau apakah akan lebih baik untuk menjalankan hook pre-commit yang secara otomatis menghasilkan output jsmin dari file javascript yang telah berubah. Asumsikan bahwa saya tidak memiliki pengetahuan menerapkan kait komit.

KELANCANGAN:

Saya sangat suka apa yang ditawarkan SASS tetapi saya juga sadar bahwa kode SASS tidak didukung oleh peramban secara default sehingga, pada titik tertentu, kode SASS perlu ditransformasikan ke CSS normal. Pada titik apa dalam alur kerja ini dilakukan.

Git

Saya takut mengakuinya tetapi, terakhir kali saya melakukan pengembangan web yang substansial, saya tidak menggunakan kontrol sumber SCM (IE, saya memang menggunakan kontrol sumber tetapi terdiri dari log perubahan yang sangat rinci dengan cadangan).

Sejak itu saya punya banyak pengalaman menggunakan Git (dan juga mercurial dan SVN) untuk pengembangan desktop tapi saya bertanya-tanya bagaimana cara terbaik mengimplementasikannya untuk pengembangan web).

Apakah ini praktik umum untuk menerapkan repositori jarak jauh pada host web sehingga saya dapat mendorong perubahan langsung ke server produksi, atau apakah ada beberapa alat lintas platform (windows / linux) yang membuatnya mudah untuk mengunggah hanya file yang diubah ke server produksi . Apakah ada perusahaan web hosting yang membuatnya mudah untuk menerapkan repositori jarak jauh, apakah saya memerlukan akses SSH, dll ...

Saya tahu bagaimana melakukannya di server pengujian saya sendiri dengan repositori jarak jauh dengan cabang pelacakan jarak jauh yang terpisah, tetapi saya belum pernah melakukannya di server hosting web produksi jarak jauh sebelumnya, jadi saya belum mengetahui pilihannya.

Tambahan:

Saya sedang mempertimbangkan untuk mengimplementasikan kerangka kerja javascript di mana file javascript terpisah yang digunakan pada suatu halaman dikompilasi menjadi satu file untuk setiap halaman pada server produksi untuk membatasi jumlah unduhan file yang dibutuhkan per halaman.

Apakah sesuatu seperti ini sudah ada? Apakah sudah ada proyek open source di alam bebas yang mengimplementasikan hal serupa yang dapat saya gunakan dan berkontribusi?

Mengingat betapa paranoid web devs tentang kinerja (dan fakta bahwa jumlah permintaan file di situs web adalah hit besar untuk kinerja) Saya menduga bahwa ada beberapa penyihir penyihir di internet yang telah mengatasi masalah ini.

Evan Plaice
sumber

Jawaban:

2

Anda dapat memeriksa ekstensi Google PageSpeed ​​untuk Apache : afaik, ada opsi untuk menggabungkan dan mengurangi Javascript dan CSS secara otomatis dan dikombinasikan dengan caching, ini akan sesuai dengan apa yang Anda sebutkan yang Anda cari di akhir posting Anda.

wildpeaks
sumber
1
Keren, saya tidak menyadari bahwa semua ini dapat dilakukan dengan satu modul Apache. Javascript / css minification, concatenation javascript / css, serta banyak peningkatan kinerja opsional lainnya. Setelah beberapa Googling saya bahkan menemukan bahwa Dreamhost menyediakannya bersama / hosting VPN. Saya terkejut tidak ada info lebih lanjut tentang hal ini di webmasters.stackexchange.com atau stackoverflow.com.
Evan Plaice
5

jsmin

Jika Anda tidak memiliki satu ton JS, Anda bisa mengatur sesuatu untuk meminimalkan setiap kali Anda menekan save. Jika Anda memiliki banyak JS, jadikan itu bagian dari proses penerapan Anda (lihat Git di bawah).

KELANCANGAN

Gunakan Kerangka Kompas . Ini termasuk SASS, ditambah skrip kecil yang "melihat" direktori SASS Anda dan mengkompilasi file ke dalam CSS (termasuk CSS yang diperkecil, jika Anda mau) setiap kali Anda menyimpan. Ini dibangun dengan mempertimbangkan RoR, tetapi Anda dapat dengan mudah menggunakannya dengan kerangka kerja web apa pun dengan membuat file konfigurasi Compass dan menjalankan perintah "kompas watch". Kompas juga mencakup banyak alat praktis lainnya seperti Cetak Biru , mixin yang berguna , dan pembuatan sprite otomatis melalui plugin Lemonade (yang harus dibangun ke dalam Kompas pada rilis berikutnya ).

Git

Tergantung pada ukuran / kompleksitas situs, pertimbangkan untuk mengikuti Capistranomodel penempatan. Tidak yakin apakah Anda dapat menggunakan Capistrano langsung dengan CakePHP, tetapi intinya adalah ini: setiap server produksi memiliki folder "saat ini" yang berisi semua kode yang berjalan dalam produksi pada saat itu. Setiap kali Anda ingin menyebarkan kode baru, Anda menjalankan skrip yang ssh untuk setiap server produksi dan memilikinya (a) menyalin isi folder "saat ini" ke folder cadangan (dengan nama rilis / cap waktu di atasnya), ( b) periksa kode terbaru dari Git ke dalam folder "saat ini" dan (c) mulailah melayani kode baru ini dari folder "saat ini". Dengan cara ini, Anda dapat memutar kembali ke rilis sebelumnya jika perlu dan Anda dapat mengetahui dengan pasti revisi mana yang sedang diproduksi. Capistrano juga memungkinkan Anda menambahkan semua jenis tugas kustom sebagai bagian dari proses penerapan, termasuk minifaksi JS / CSS,

Tambahan

Ya, ada banyak. Google untuk sesuatu seperti "CSS / JS concat". Berikut ini adalah yang saya temukan untuk CakePHP: Paket Aset .

Yevgeniy Brikman
sumber
Terima kasih banyak atas masukannya. Saya sangat suka apa yang saya lihat dengan Kerangka Kompas. Saya hanya berharap saya tahu cara untuk menyebarkannya di PHP. Saya mencari di sekitar tetapi tidak dapat menemukan alternatif. Capistrano juga terlihat sangat menarik tetapi alih-alih model salin file yang mahal dan rapuh, saya hanya menggunakan ssh untuk memberi tahu klien git pada semua server jarak jauh untuk melakukan 'git pull --rebase' yang cepat setelah memeriksa apakah itu bekerja pada pengujian. server terlebih dahulu.
Evan Plaice
(lanjutan) Pengemas aset juga terlihat sangat menarik. Satu-satunya alasan saya memilih jawaban lain dari Anda adalah, itu berisi semuanya dalam satu kesempatan dengan pemrosesan yang dilakukan di server itu sendiri (jadi tidak perlu skrip tambahan). Satu-satunya downside yang saya lihat pada pagespeed adalah pemrosesan tambahan konten statis (yang mudah ditangani menggunakan caching konten statis dan / atau CDN. Saya benar-benar berharap saya dapat menerima 2 karena jawaban Anda memiliki banyak informasi berharga.
Evan Plaice
Anda tidak "menggunakan" kerangka kerja Kompas dengan PHP. Anda hanya menjalankannya saat Anda membuat kode, itu mengkompilasi file CSS Anda setiap kali Anda menekan menyimpan, dan file CSS adalah apa yang sebenarnya dikerahkan. Untuk "menjalankan" kompas, pertama-tama Anda perlu membuat file config Anda (compass.rb) - gunakan ini untuk menghasilkan opsi baris perintah: jsfiddle.net/chriseppstein/PG46q/3 . Setelah Anda mengonfigurasi file konfigurasi dengan semua jalur Anda, jalankan saja "kompas tontonan" di folder yang sama dengan file konfigurasi, dan kompas akan mulai mengkompilasi ulang SASS Anda setiap kali Anda menekan save. Cobalah di beberapa proyek sampingan: SANGAT mudah & cepat.
Yevgeniy Brikman
Juga, sejauh yang saya tahu, Capistrano tidak banyak menyalin. Setiap kali Anda menggunakan, itu memeriksa kode terbaru dan hanya menukar nama folder. Keuntungannya adalah Anda selalu dapat memutar kembali ke versi sebelumnya dengan hanya menukar nama folder lagi.
Yevgeniy Brikman
Saya menemukan artikel tentang cara menjalankannya dan menjalankannya dalam PHP. Lebih mudah digunakan di luar proyek Ruby daripada yang saya harapkan. Gores komentar terakhir saya tentang Capistrano. Saya pikir itu digunakan untuk mengirim perintah terdistribusi ke beberapa server. Jika saya memiliki akses ssh ke server jauh saya lebih suka drop klien git sebagai sarana untuk menarik perubahan terbaru dari cabang produksi. IMHO, folder swapping folder adalah ide yang buruk. Saya lebih suka untuk menandai revisi dengan dalam siklus rilis dan hanya checkout tag sebelumnya jika yang saat ini memiliki masalah.
Evan Plaice