Pengantar Kerangka Web
Peta jalan
- Diskusikan kerangka kerja apa itu dan mengapa mereka membantu kami menulis aplikasi
- Pelajari Perbedaan Antara Frontend, Backend dan CSS Frameworks
- Pelajari kerangka kerja mana yang populer untuk saat ini dan mengapa
- Tahu cara membuat keputusan tentang kerangka kerja mana yang akan digunakan untuk proyek
Jenis aplikasi apa yang akan Anda bangun?
Jika Anda tidak yakin, di sini dan di sini memiliki beberapa ide hebat! Juga, luangkan waktu memikirkan apa yang akan membuat aplikasi Anda paling sukses. Diskusikan ide -ide Anda dengan orang -orang di meja Anda.
Kesamaan aplikasi web
Lihatlah Facebook, Twitter, LinkedIn, dan GitHub dan daftar beberapa kesamaan yang Anda lihat dengan orang -orang di dekat Anda.
Kerangka apa itu
Jika kita melihat beberapa aplikasi web yang berbeda, kita dapat melihat bahwa ada banyak fitur yang digandakan. Semua yang kami lihat di atas memiliki otentikasi pengguna, tampilan yang diberikan, mereka terhubung ke database, mereka memiliki profil yang dapat Anda lihat, mereka semua memiliki feed informasi bergaya dll. Jika saya mau, saya bisa menulis semua logika itu sendiri setiap kali saya ingin membangun aplikasi baru; Namun, ada juga banyak alat yang tersedia yang dapat dilakukan untuk kita. Selain itu, banyak waktu ketika kami membangun aplikasi kami ingin memformat kode kami dengan cara tertentu yang membantu kami menjadi efisien dan membantu pengembang lain lebih mudah memahami kode kami. Kerangka kerja web membantu kami mencapai struktur untuk aplikasi kami, dan mereka memberi kami fitur tambahan yang dapat kami tambahkan ke aplikasi kami tanpa terlalu banyak pekerjaan tambahan. Kerangka kerja memberi kami tempat untuk memulai dengan aplikasi kami sehingga kami dapat fokus pada fitur untuk aplikasi kami daripada detail konfigurasi.
Most websites share a very similar (not to say identical) structure. The aim of frameworks is to provide a common structure so that developers don’t have to redo it from scratch and can reuse the code provided. In this way, frameworks allow us to cut out much of the work and save a lot of time.
To summarize: there’s no need to reinvent the wheel.
dari Awward.
Backend vs Frontend
Frontend aplikasi web adalah bagian yang Anda lihat dan berinteraksi dengan. Ini terdiri dari desain web dan interaksi situs. Dalam hal bahasa pemrograman, ini hampir selalu terdiri dari CSS, HTML, dan Javascript halaman.
Backend terdiri dari server, database, dan kode yang berinteraksi dengan mereka. Ini juga terdiri dari kode yang memberikan data dinamis ke frontend situs. Ini dapat ditangani di sebagian besar bahasa pemrograman. Yang akan kita bahas terutama hari ini adalah Python, Ruby, dan Node JavaScript tetapi ada banyak orang lain.
Kerangka kerja antarmuka pengguna
Kerangka kerja antarmuka pengguna membantu membuat aplikasi web yang terlihat bergaya dan profesional. Sebagian besar termasuk semacam sistem kisi sehingga Anda dapat memiliki elemen yang disejajarkan dengan baik, mereka memiliki skema warna sehingga ditangani untuk Anda, dan mereka bergaya komponen HTML Anda sehingga terlihat bersih dan profesional.
Beberapa di antaranya termasuk:
- Bootstrap
- Sangat terkenal dan dibangun oleh twitter
- Mudah dipelajari dan terlihat profesional
- Bisa mudah dikenali "Situs Bootstrap"
- Bisa sulit untuk menyesuaikan komponen
- Mewujudkan
- Terlihat bersih
- Sedikit lebih "menyenangkan" daripada bootstrap
- Banyak pilihan gaya dan warna
- Mengikuti Panduan Gaya Material Google
- Dasar
- Banyak contoh
- Terlihat profesional
- UI semantik
- Banyak bawaan
- Dibangun tema sehingga dapat disesuaikan
- Grommet
- Memiliki fokus besar pada aksesibilitas
- Terlihat sangat bersih
- Tidak digunakan seperti beberapa yang lain
- Dibuat untuk React JS (kerangka kerja lain yang akan kita lihat nanti)
Memilih Kerangka UI
Memilih kerangka kerja UI sebagian besar datang ke preferensi pribadi dalam penampilan dan tujuan situs. Gaya yang berbeda mungkin menarik bagi industri yang berbeda lebih atau mungkin menyampaikan pesan yang berbeda.
Luangkan beberapa menit mendiskusikan penampilan yang berbeda dan pilih mana yang terbaik untuk aplikasi sampel Anda.
Kerangka kerja frontend
- Vue
- Mudah dipelajari
- Sangat cepat
- Semua alat yang terkait dengannya dikemas dengan baik
- Mengambil bagian dari sudut dan bereaksi dan mengoptimalkannya
- kurang banyak diadopsi daripada yang lain
- Fleksibel - Anda dapat menggunakannya dalam berbagai cara
- AngularJS
- Dibangun oleh Google
- Didukung dengan baik
- Sejumlah besar fitur
- Meningkatkan skalabilitas aplikasi
- Sulit untuk debug
- Kurva belajar yang besar
- Angular 2+
- Dibangun oleh Google
- Didukung dengan baik
- Mendorong penggunaan kembali
- Meningkatkan skalabilitas aplikasi
- Kurva belajar yang besar
- Bereaksi
- Dibangun oleh Facebook
- Bundel kode frontend menjadi komponen
- Mengatur kode dan data untuk membuat kode lebih dapat digunakan kembali
- Kurva belajar yang besar
- Memiliki beberapa kontroversi dengan klausul kekayaan intelektualnya
- Bara
- Memberikan sejumlah besar fungsionalitas di luar kotak
- Opinionated (Anda harus menggunakan pemformatannya)
- Kurva belajar yang curam
Memilih Kerangka Kerja Frontend
Pergi melalui beberapa di antaranya dan lihat kodenya. Juga meneliti pro dan kontra masing -masing. Pikirkan yang terbaik untuk belajar atau berintegrasi ke dalam ide aplikasi Anda.
Kerangka kerja backend
- Spring MVC
- Java (bahasa yang lebih sulit untuk dipelajari)
- Sangat cepat
- Kurang berpendapat
- Django
- Python (bahasa yang lebih mudah dipelajari)
- Medium bahagia antara sangat berpendapat dan kurang terstruktur
- Memberi Anda banyak fungsi di luar kotak (seperti otentikasi pengguna, koneksi database, dan rendering tampilan)
- Bisa sulit untuk mengintegrasikan frontend mewah.
- Penanganan data Python luar biasa
- Labu
- Python (bahasa yang lebih mudah dipelajari)
- Kurang opini dan lebih dapat disesuaikan dari Django
- Memberi Anda lebih sedikit di luar kotak (Anda harus membangun lebih banyak)
- Ruby on Rails
- Ruby (bahasa yang lebih mudah untuk dipelajari)
- Sangat berpendapat
- Memiliki alat yang bagus seperti perancah sehingga Anda dapat membangun sesuatu dengan cepat
- Memberi Anda banyak fungsi di luar kotak (seperti otentikasi pengguna, koneksi database, dan rendering tampilan)
- Pipa aset membantu pengembangan frontend
- Ruby membutuhkan waktu lebih lama untuk menjalankan program daripada beberapa bahasa pemrograman lainnya
- Meteor
- JavaScript (bahasa yang lebih mudah untuk dipelajari)
- Memberi Anda banyak fungsi di luar kotak (seperti otentikasi pengguna, koneksi database, dan rendering tampilan)
- Terintegrasi dengan sangat baik dengan frontend modern
- Cepat
- JavaScript (bahasa yang lebih mudah untuk dipelajari)
- Sangat dapat disesuaikan
- Sangat ringan
- Fitur yang lebih sedikit builtin
- Node sangat cepat
Memilih Kerangka Kerja Backend
Pergi melalui beberapa di antaranya dan lihat kodenya. Juga meneliti pro dan kontra masing -masing. Pikirkan yang terbaik untuk belajar atau berintegrasi ke dalam ide aplikasi Anda.
Lebih Banyak Sumber Daya!
- Tutorial Django Girls
- Akademi Kode
- TODOMVC
- Podcast Codenewbie
- Wanita yang mengkode DC
- Seberapa cepat berbeda bahasa pemrograman?
Tetap Berhubungan!
- aspittel.github.io
- @aspittel di Twitter
- Aspittel di GitHub
- Ali Spittel di LinkedIn