Pisahkan REST JSON API server dan klien? [Tutup]


371

Saya akan membuat banyak aplikasi web dari awal. (Lihat http://50pop.com/code untuk ikhtisar.) Saya ingin mereka dapat diakses dari berbagai klien: situs web front-end, aplikasi ponsel cerdas, layanan web backend, dll. Jadi saya benar-benar menginginkan API SISA JSON untuk masing-masing.

Juga, saya lebih suka bekerja di back-end, jadi saya melamunkan saya menjaga fokus saya murni pada API, dan mempekerjakan orang lain untuk membuat UI front-end, apakah situs web, iPhone, Android, atau aplikasi lainnya.

Tolong bantu saya memutuskan pendekatan mana yang harus saya ambil:

BERSAMA DALAM KERETA API

Buat aplikasi web Rails yang sangat standar. Di controller, lakukan saklar response_with, untuk melayani JSON atau HTML. Respons JSON adalah API saya.

Pro: Banyak preseden. Standar hebat & banyak contoh melakukan hal-hal seperti ini.

Con: Jangan selalu ingin API sama dengan aplikasi web. Tidak suka jika / kemudian response_with beralih pendekatan. Menggabungkan dua hal yang sangat berbeda (UI + API).

REST SERVER + JAVASCRIPT-KLIEN BERAT

Buat server REST API JSON-only. Gunakan Backbone atau Ember.js untuk JavaScript sisi klien untuk mengakses API secara langsung, menampilkan templat di browser.

Pro: Saya suka pemisahan API & klien. Orang pintar mengatakan ini adalah jalan yang harus ditempuh. Besar dalam teori. Tampak canggih dan menarik.

Con: Tidak banyak preseden. Tidak banyak contoh ini dilakukan dengan baik. Contoh publik (twitter.com) merasa lamban & bahkan beralih dari pendekatan ini.

REST SERVER + SERVER-SIDE HTML CLIENT

Buat server REST API JSON-only. Buat klien situs web HTML dasar, yang mengakses API REST saja. Lebih sedikit JavaScript sisi klien.

Pro: Saya suka pemisahan API & klien. Tapi melayani HTML5 biasa sangat mudah & tidak intensif klien.

Con: Tidak banyak preseden. Tidak banyak contoh ini dilakukan dengan baik. Kerangka kerja tidak mendukung ini juga. Tidak yakin bagaimana cara mendekatinya.

Terutama mencari nasihat dari pengalaman, bukan hanya secara teori.


50
kami biasanya lebih suka bahwa spekulatif, pertanyaan papan tulis konseptual pergi di programmer.stackexchange.com sementara pertanyaan di sini di Stack Overflow harus berisi kode sumber aktual 99% dari waktu. Tapi, itu adalah pertanyaan yang diajukan dengan baik dan saya suka pekerjaan Anda, jadi ini bisa jatuh di wilayah abu-abu untuk saat ini.
Jeff Atwood

2
Adakah yang punya beberapa contoh / sumber (untuk memahami alasannya) bagi mereka yang pindah dari opsi 2?
Víctor López García

12
@ frntk Alasan asli banyak perusahaan (seperti Twitter) melakukan klien Javascript adalah karena mereka pikir akan lebih cepat. Sekarang, mereka menyadari bahwa itu sebenarnya lebih lambat. Lihat engineering.twitter.com/2012/05/… dan openmymind.net/2012/5/30/Client-Side-vs-Server-Side-Rendering
Moshe Katz

1
Baca komentar di tautan di atas. Banyak asumsi artikel tersebut dibantah dengan logika dan pengalaman.
Ricalsin

1
Hari-hari ini Anda ingin membuat backend JSON API mengikuti spesifikasi jsonapi.org ... :)
Askar

Jawaban:


136

Di Boundless , kami telah mendalami opsi # 2 dan meluncurkannya kepada ribuan siswa. Server kami adalah JSON REST API (Scala + MongoDB), dan semua kode klien kami disajikan langsung dari CloudFront (yaitu: www.boundless.com hanyalah alias untuk CloudFront).

Pro:

  • Canggih / mengasyikkan
  • Banyak hal yang dapat Anda lakukan: API memberi Anda dasar untuk klien web Anda sendiri, klien seluler, akses pihak ketiga, dll.
  • transisi pemuatan situs / halaman yang sangat cepat

Cons:

  • Tidak SEO friendly / siap tanpa banyak pekerjaan.
  • Membutuhkan orang web front-end terkemuka yang siap menghadapi kenyataan pengalaman situs yang 70% javascript dan apa artinya itu.

Saya pikir ini adalah masa depan semua aplikasi web.

Beberapa pemikiran untuk orang-orang web front end (yang mana semua kebaruan / tantangan diberikan arsitektur ini):

  • CoffeeScript. Jauh lebih mudah untuk menghasilkan kode berkualitas tinggi.
  • Tulang punggung. Cara hebat untuk mengatur logika Anda, dan komunitas aktif.
  • HAMLC. Template Haml + CoffeeScript => JS.
  • KELANCANGAN

Kami telah membangun harness untuk pengembangan front-end kami yang disebut 'Spar' (Rocketship Aplikasi Halaman Tunggal) yang secara efektif merupakan pipeline aset dari Rails yang disetel untuk pengembangan aplikasi halaman tunggal. Kami akan menjadi sumber terbuka dalam beberapa minggu ke depan di halaman github kami , bersama dengan posting blog yang menjelaskan cara menggunakannya dan arsitektur keseluruhan secara lebih rinci.

MEMPERBARUI:

Sehubungan dengan keprihatinan orang-orang dengan Backbone, saya pikir mereka dinilai terlalu tinggi. Backbone jauh lebih merupakan prinsip organisasi daripada kerangka kerja yang dalam. Situs Twitter itu sendiri adalah binatang raksasa Javascript yang mencakup setiap sudut kasus di jutaan pengguna & peramban lawas, saat memuat tweet secara langsung, pengumpulan sampah, banyak tampilan multimedia, dll. Dari semua situs 'murni' yang saya miliki terlihat, Twitter adalah yang aneh. Ada banyak aplikasi rumit yang dikirimkan melalui JS yang harganya sangat baik.

Dan pilihan arsitektur Anda sepenuhnya tergantung pada tujuan Anda. Jika Anda mencari cara tercepat untuk mendukung banyak klien dan memiliki akses ke bakat front-end yang bagus, berinvestasi dalam API mandiri adalah cara terbaik untuk melangkah.


1
Poin kecil untuk ditambahkan: Meskipun saya hanya membangun opsi # 1, saya tahu beberapa pengembang aplikasi seluler yang mulai menggunakan parse.com sebagai backend mereka untuk memungkinkan jalur cepat ke # 2.
Rhb123

Hal-hal seperti Parse dan Kinvey sangat menarik, tidak bisa mengatakan saya memiliki kesempatan untuk bermain bersama mereka. Tergantung jika nilaimu ada di depan atau belakang tumpukan, kurasa
Aaron

Saya menggunakan pendekatan yang sama dengan spinejs untuk frontend.
Nicolas Goy

Bagaimana Anda menangani satu domain yang menjalankan dua aplikasi terpisah? Misalnya. Saya memiliki www.mysite.com dan saya ingin mengekspos API publik dan melayani front-end pada URL itu. Sesuai dengan prinsip REST, mysite.com/product/24 diakses dari browser web harus mengembalikan halaman HTML dengan melihat header Terima HTTP, dan GET dengan JSON di header Terima di mysite.com/product/24 harus mengembalikan JSON .
Erich

Bagaimana AngularJS akan cocok untuk ini?
Ankan-Zerob

48

Tanya dengan sangat baik. +1. Yang pasti, ini adalah referensi yang berguna di masa depan bagi saya. Juga @Aaron dan lainnya menambah nilai diskusi. Seperti Ruby, pertanyaan ini juga berlaku untuk lingkungan pemrograman lain.

Saya telah menggunakan dua opsi pertama. Yang pertama untuk berbagai aplikasi dan yang kedua untuk proyek open source saya Cowoop

Pilihan 1

Yang ini tidak diragukan lagi yang paling populer. Tapi saya menemukan implementasi sangat banyak http-ish. Setiap kode awal API berkaitan dengan objek permintaan. Jadi kode API lebih dari kode ruby ​​/ python / bahasa murni lainnya.

pilihan 2

Saya selalu menyukai ini.

Opsi ini juga menyiratkan bahwa HTML tidak runtime yang dihasilkan di server. Ini adalah bagaimana opsi 2 berbeda dari opsi 3. Tapi dibangun sebagai html statis menggunakan skrip build Ketika dimuat di sisi klien, HTML ini akan memanggil server API sebagai klien JS API.

  • Pemisahan masalah adalah keuntungan besar. Dan sangat sesuai dengan keinginan Anda (dan menambang) para ahli backend menerapkan API backend, mengujinya dengan mudah seperti kode bahasa biasa tanpa khawatir tentang kerangka / kode permintaan http.

  • Ini sebenarnya tidak sesulit kedengarannya di sisi frontend. Apakah panggilan API dan data yang dihasilkan (kebanyakan json) tersedia untuk templat sisi klien atau MVC Anda.

  • Kurang pemrosesan sisi server. Ini berarti Anda dapat menggunakan perangkat keras komoditas / server yang lebih murah.

  • Lebih mudah untuk menguji lapisan secara mandiri, lebih mudah untuk menghasilkan dokumen API.

Itu memang memiliki beberapa kelemahan.

  • Banyak pengembang menemukan ini lebih dari direkayasa dan sulit dimengerti. Jadi kemungkinan arsitektur itu bisa dikritik.

  • i18n / l10n sulit. Karena HTML yang dihasilkan pada dasarnya adalah waktu statis, maka diperlukan beberapa build per bahasa yang didukung (yang tidak selalu buruk). Tetapi bahkan dengan itu Anda mungkin memiliki kasus sudut sekitar l10n / i18n dan perlu berhati-hati.

Opsi 3

Pengkodean backend dalam hal ini harus sama dengan opsi kedua. Sebagian besar poin untuk opsi 2 juga berlaku di sini.

Halaman web diberikan runtime menggunakan templat sisi server. Ini membuat i18n / l10n jauh lebih mudah dengan teknik yang lebih mapan / diterima. Mungkin satu panggilan http kurang untuk beberapa konteks penting yang diperlukan untuk rendering halaman seperti pengguna, bahasa, mata uang dll. Jadi pemrosesan sisi server meningkat dengan rendering tetapi mungkin dikompensasi oleh panggilan http kurang ke server API.

Sekarang halaman-halaman dirender di server, frontend sekarang lebih terikat dengan lingkungan pemrograman. Ini bahkan mungkin bukan pertimbangan untuk banyak aplikasi.

Kasing Twitter

Seperti yang saya mengerti, Twitter mungkin melakukan rendering halaman awal mereka di server tetapi untuk pembaruan halaman masih memiliki beberapa panggilan API dan template sisi klien untuk memanipulasi DOM. Jadi dalam kasus seperti itu Anda memiliki template ganda untuk mempertahankan yang menambahkan beberapa overhead dan kompleksitas. Tidak semua orang mampu membeli opsi ini, tidak seperti Twitter.

Stack proyek kami

Saya kebetulan menggunakan Python. Saya menggunakan JsonRPC 2.0 sebagai ganti REST. Saya menyarankan REST, meskipun saya suka ide JsonRPC karena berbagai alasan. Saya menggunakan perpustakaan di bawah ini. Seseorang yang mempertimbangkan opsi 2/3 mungkin menganggapnya berguna.

Kesimpulan dan rekomendasi saya

Opsi 3 !.

Semua mengatakan, saya telah menggunakan opsi 2 dengan sukses tetapi sekarang condong ke opsi 3 untuk kesederhanaan. Menghasilkan halaman HTML statis dengan skrip build dan melayani mereka dengan salah satu server ultra cepat yang berspesialisasi dalam melayani halaman statis sangat menggoda (Opsi 2).


Saya juga suka opsi 2, tetapi opsi 3 memiliki banyak keuntungan yang tidak dapat kami singkirkan. Saya mencoba mencari beberapa solusi hidrid yang menggabungkan kedua opt2 + opt3, tetapi itu akan menyebabkan sakit kepala seperti Twitter.
Blue Smith

Saya suka opsi 3, dan bertujuan untuk digunakan jika untuk proyek saat ini. Adakah eg atau git repo yang dapat Anda tunjuk untuk meminta bantuan?
AmaChefe

@AmaChefe saya berharap. Untuk proyek saat ini di mana SEO sangat penting kami menggunakan opsi 3. Tetapi kode tidak open source. Kami menggunakan labu + jinja2 dan sistem gugur / react.js.
Shekhar

28

Kami memilih # 2 ketika membangun gaug.es. Saya bekerja di API (ruby, sinatra, dll.) Dan mitra bisnis saya, Steve Smith, bekerja di front-end (klien javascript).

Pro:

  1. Bergerak cepat secara paralel. Jika saya bekerja di depan Steve, saya bisa terus membuat API untuk fitur baru. Jika dia bekerja di depan saya, dia bisa memalsukan API dengan sangat mudah dan membangun UI.

  2. API gratis. Memiliki akses terbuka ke data di aplikasi Anda dengan cepat menjadi fitur standar. Jika Anda mulai dengan API dari bawah ke atas, Anda mendapatkannya secara gratis.

  3. Bersihkan pemisahan. Lebih baik menganggap aplikasi Anda sebagai API dengan klien. Tentu, klien pertama dan yang paling penting mungkin web, tetapi itu membuat Anda mudah membuat klien lain (iPhone, Android).

Cons:

  1. Kompatibilitas Mundur. Ini lebih terkait dengan API daripada pertanyaan langsung Anda, tetapi begitu API Anda ada di sana, Anda tidak bisa begitu saja memecahkannya atau Anda menghancurkan semua klien Anda dua. Ini tidak berarti Anda harus bergerak lebih lambat, tetapi itu berarti Anda harus sering membuat dua hal bekerja sekaligus. Menambahkan ke API atau bidang baru baik-baik saja, tetapi mengubah / menghapus tidak boleh dilakukan tanpa versi.

Saya tidak bisa memikirkan kontra lagi sekarang.

Kesimpulan: API + JS client adalah cara yang harus dilakukan jika Anda berencana untuk merilis API.

PS Saya juga akan merekomendasikan untuk mendokumentasikan sepenuhnya API Anda sebelum merilisnya. Proses mendokumentasikan API Gaug.es benar-benar membantu kami

http://get.gaug.es/documentation/api/


13
Bolehkah saya bertanya bagaimana Anda mengautentikasi antarmuka web dengan API REST? Saya melihat bahwa Anda memerlukan kunci API untuk berkomunikasi dengan API yang diperoleh dengan masuk ke profil pengguna Anda. Tetapi bagaimana klien web mendapatkan kunci API-nya, jika Anda tahu apa yang saya maksud?
Sebastian Wramba

@SebastianWramba Ini sudah terlambat, tetapi karena komentar Anda mendapat 12 upvotes ... Saya akan melihat sesuatu seperti otorisasi kata sandi OAuth2 . Jika Anda adalah pembuat aplikasi yang memanggil API, ini adalah pendekatan yang mungkin Anda inginkan, karena itu tidak menggunakan kunci API secara langsung. Jika ini adalah aplikasi pihak ketiga, Anda memiliki pengguna yang masuk ke situs web Anda untuk mendapatkan kunci API mereka, dan kemudian pengguna menggunakan kunci itu (dan kredensial lain yang diperlukan) untuk mengakses API melalui aplikasi, situs web, dll.
GreeKatrina

10

Saya lebih suka pergi rute # 2 dan # 3. Terutama karena # 1 melanggar pemisahan kekhawatiran dan mencampur semua jenis barang. Akhirnya Anda akan menemukan kebutuhan untuk memiliki titik akhir API yang tidak memiliki halaman HTML yang cocok / dll dan Anda akan sampai di sungai dengan titik akhir HTML dan JSON yang bercampur dalam basis kode yang sama. Itu berubah menjadi kekacauan yang aneh, bahkan jika itu MVP, Anda harus menulis ulang pada akhirnya karena sangat berantakan sehingga bahkan tidak layak diselamatkan.

Dengan # 2 atau # 3 memungkinkan Anda untuk sepenuhnya memiliki API yang bertindak sama (sebagian besar) terlepas dari apa pun. Ini memberikan fleksibilitas yang luar biasa. Saya belum 100% dijual di Backbone / bara / apa pun / etc.js dulu. Saya pikir itu hebat, tetapi seperti yang kita lihat dengan twitter ini tidak optimal. TAPI ... Twitter juga merupakan binatang buas besar dari sebuah perusahaan dan memiliki ratusan juta pengguna. Jadi setiap perbaikan dapat memiliki dampak besar pada bottom line di berbagai bidang berbagai unit bisnis. Saya pikir ada lebih banyak keputusan daripada kecepatan saja dan mereka tidak membiarkan kita terlibat dalam hal itu. Tapi itu hanya pendapat saya. Namun, saya tidak mengabaikan backbone dan pesaingnya. Aplikasi ini bagus untuk digunakan dan sangat bersih dan sangat responsif (sebagian besar).

Opsi ketiga juga memiliki daya pikat yang valid. Di sinilah saya akan mengikuti prinsip Pareto (aturan 80/20) dan memiliki 20% markup utama Anda (atau sebaliknya) diberikan di server dan kemudian memiliki klien JS yang bagus (backbone / dll) menjalankan sisanya . Anda mungkin tidak berkomunikasi 100% dengan api REST melalui klien JS, tetapi Anda akan melakukan beberapa pekerjaan jika perlu untuk membuat pengalaman suer lebih baik.

Saya pikir ini adalah salah satu dari "itu tergantung" jenis masalah dan jawabannya adalah "itu tergantung" pada apa yang Anda lakukan, siapa yang Anda layani dan jenis pengalaman apa yang Anda ingin mereka terima. Mengingat bahwa saya pikir Anda dapat memutuskan antara 2 atau 3 atau hibrida dari mereka.


+1 hingga hibrida 2 dan 3
Ujjwal Ojha

7

Saat ini saya sedang mengerjakan konversi CMS besar dari opsi 1 ke opsi 3, dan itu berjalan dengan baik. Kami memilih untuk membuat sisi server markup karena SEO adalah masalah besar bagi kami, dan kami ingin situs berkinerja baik di ponsel.

Saya menggunakan node.js untuk back-end klien dan beberapa modul untuk membantu saya. Saya agak awal dalam proses tetapi yayasan telah ditetapkan dan itu adalah masalah memeriksa data memastikan semuanya menjadikannya benar. Inilah yang saya gunakan:

  • Ekspresikan untuk fondasi aplikasi.
    (https://github.com/visionmedia/express)
  • Permintaan untuk mengambil data.
    (https://github.com/mikeal/request)
  • Menggarisbawahi template yang diberikan sisi server. Saya menggunakan kembali ini pada klien.
    (https://github.com/documentcloud/underscore)
  • UTML membungkus template garis bawah untuk membuatnya bekerja dengan Express.
    (https://github.com/mikefrey/utml)
  • Muka mengumpulkan templat dan mari Anda pilih yang dikirim ke klien.
    (https://github.com/mrDarcyMurphy/upfront)
  • Express Expose meneruskan data yang diambil, beberapa modul, dan templat ke front-end.
    (https://github.com/visionmedia/express-expose)
  • Backbone menciptakan model dan tampilan di front-end setelah menelan data yang diteruskan.
    (https://github.com/documentcloud/backbone)

Itulah inti tumpukan. Beberapa modul lain yang saya temukan bermanfaat:

  • fleck (https // github.com / trek / fleck)
  • moment (https // github.com / timrwood / moment)
  • stylus (https // github.com / LearnBoost / stylus)
  • smoosh (https // github.com / fat / smoosh)
    ... meskipun saya sedang mencari gerutuan (https // github.com / cowboy / grunt)
  • jejak konsol (//github.com/LearnBoost/console-trace).

Tidak, saya tidak menggunakan kopi.

Opsi ini bekerja sangat baik untuk saya. Model-model di back-end tidak ada karena data yang kami dapatkan dari API terstruktur dengan baik dan saya meneruskannya kata demi kata ke front-end. Satu-satunya pengecualian adalah model tata letak kami di mana saya menambahkan satu atribut yang membuat rendering lebih pintar dan lebih ringan. Saya tidak menggunakan perpustakaan model mewah untuk itu, hanya fungsi yang menambahkan apa yang saya butuhkan pada inisialisasi dan mengembalikannya sendiri.

(maaf untuk tautan aneh, saya terlalu banyak n00b untuk stack overflow untuk membiarkan saya memposting sebanyak itu)


1
Jadi Anda merender markup di sisi server tetapi Anda masih memberikan templat ke klien dan menggunakan Backbone?
Shannon

7

Kami menggunakan varian # 3 berikut: Membuat server REST API JSON-only. Buat server situs web HTML. Server web HTML tidak, seperti pada varian Anda, klien ke server REST API. Sebaliknya, keduanya adalah teman sebaya. Tidak jauh di bawah permukaan, ada API internal yang menyediakan fungsionalitas yang dibutuhkan kedua server.

Kami tidak mengetahui adanya preseden, jadi ini semacam percobaan. Sejauh ini (akan memasuki beta), ini telah bekerja dengan cukup baik.


Saya sedang memikirkan opsi ini untuk menghindari beberapa masalah yang terkait dengan menjadi klien API yang tepat, seperti otentikasi. Saya ingin tahu lebih banyak tentang bagaimana Anda menyusun semuanya dan bagaimana Anda mengelola pemisahan dan komunikasi antara tiga bagian yang berbeda. Adakah yang bisa saya baca? Terima kasih!
MartinodF

2
@MartinodF Kami host di Google App Engine, yang membatasi Java atau Python. Ingin menggunakan Python, tetapi dipaksa masuk ke Java karena kami mengolah angka (tidak dapat memperpanjang Py dengan C / C ++ di GAE). Kami memilih Stripes (Stripes, bukan Struts, bukan Spring) untuk kerangka presentasi. Sangat senang dengan itu. Semuanya adalah satu aplikasi Java di GAE. Fungsionalitas inti diimplemetasikan dalam sekelompok paket Java dan diekspos dalam API internal. Ada servlet yang menyediakan layanan JSON REST, dan lainnya yang dikonfigurasi sebagai aplikasi web Stripes. Karena itu semua adalah satu aplikasi Java GAE, komunikasi sepele.
Thomas Becker

Terima kasih atas wawasannya, ini sangat berguna!
MartinodF

7

Saya biasanya pergi untuk opsi 2, menggunakan Rails untuk membangun API, dan tulang punggung untuk hal-hal JS. Anda bahkan bisa mendapatkan panel admin secara gratis menggunakan ActiveAdmin . Saya telah mengirimkan puluhan aplikasi seluler dengan backend semacam ini. Namun itu sangat tergantung apakah aplikasi Anda interaktif atau tidak.

Saya melakukan presentasi tentang pendekatan ini pada RubyDay.it terakhir : http://www.slideshare.net/matteocollina/enter-the-app-era-with-ruby-on-rails-rils-rubyday

Untuk opsi ketiga, untuk mendapatkan respons yang kedua, Anda mungkin ingin mencoba pajax seperti yang dilakukan Github.


6

Saya sekitar 2 bulan dalam proyek 3 bulan yang mengambil pendekatan kedua yang telah Anda uraikan di sini. Kami menggunakan sisi server API yang tenang dengan backbone.js di bagian depan. Handlebars.js mengelola template dan jQuery menangani manipulasi AJAX dan DOM. Untuk browser yang lebih lama dan spider pencarian kami telah kembali ke rendering sisi server, tetapi kami menggunakan template HTML yang sama dengan frontend Handlebars menggunakan Mozilla Rhino.

Kami memilih pendekatan ini karena berbagai alasan tetapi sangat sadar itu sedikit berisiko mengingat belum terbukti dalam skala luas. Semua sama, semuanya berjalan cukup lancar sejauh ini.

Sejauh ini kami baru saja bekerja dengan satu API, tetapi pada fase berikutnya dari proyek kami akan bekerja dengan API kedua. Yang pertama adalah untuk sejumlah besar data, dan yang kedua bertindak lebih seperti CMS melalui API.

Memiliki dua bagian dari proyek ini yang sepenuhnya independen satu sama lain adalah pertimbangan utama dalam memilih infrastruktur ini. Jika Anda mencari arsitektur untuk menumbuk sumber daya independen yang berbeda tanpa ketergantungan apa pun maka pendekatan ini patut dicoba.

Saya khawatir saya bukan cowok Ruby jadi saya tidak bisa mengomentari pendekatan lain. Terkadang tidak apa-apa mengambil risiko. Lain kali lebih baik bermain aman. Anda akan tahu sendiri tergantung pada jenis proyek.

Semoga beruntung dengan pilihan Anda di sini. Tertarik untuk melihat apa yang dibagikan orang lain juga.


1
Jadi, Anda mendeteksi apakah permintaan tersebut berasal dari bot pencarian, dan menayangkan HTML yang telah dirender sebelumnya, dan JS + Templat jika tidak?
Shannon

4

Saya suka # 3 ketika situs web saya tidak akan menjadi implementasi CRUD 100% dari data saya. Yang mana belum terjadi.

Saya lebih suka sinatra dan hanya akan membagi aplikasi menjadi beberapa aplikasi rak yang berbeda dengan tujuan berbeda. Saya akan membuat aplikasi rak khusus API yang akan mencakup apa yang saya butuhkan untuk API. Maka mungkin aplikasi rak pengguna yang akan menyajikan halaman web saya. Terkadang versi itu akan menanyakan API jika diperlukan, tetapi biasanya hanya menyangkut dirinya sendiri dengan situs html.

Saya tidak khawatir tentang hal itu dan hanya melakukan query layer dari sisi pengguna jika saya membutuhkannya. Saya tidak terlalu khawatir dengan menciptakan pemisahan yang lengkap karena mereka biasanya berakhir dengan tujuan yang berbeda.

Berikut adalah contoh yang sangat sederhana menggunakan beberapa aplikasi rak. Saya menambahkan contoh jquery cepat di sana agar Anda melihatnya mengenai aplikasi API. Anda dapat melihat betapa sederhananya dengan sinatra dan memasang beberapa aplikasi rak dengan tujuan berbeda.

https://github.com/dusty/multi-rack-app-app


1

Beberapa jawaban yang bagus sudah ada di sini - saya pasti akan merekomendasikan # 2 atau # 3 - pemisahannya baik secara konsep tetapi juga dalam praktiknya.

Sulit untuk memprediksi hal-hal seperti pola muat dan lalu lintas pada API dan pelanggan yang kami lihat yang melayani API secara mandiri memiliki waktu yang lebih mudah dalam penyediaan dan penskalaan. Jika Anda harus melakukan itu dengan pola akses web manusia itu kurang mudah. Juga penggunaan API Anda mungkin akhirnya jauh lebih cepat daripada klien web Anda dan kemudian Anda bisa melihat di mana harus mengarahkan usaha Anda.

Antara # 2 # 3 itu benar-benar tergantung pada tujuan Anda - Saya setuju bahwa # 2 mungkin adalah masa depan webapps - tetapi mungkin Anda menginginkan sesuatu yang lebih mudah jika saluran itu hanya akan menjadi salah satu dari banyak!


1

Untuk atyourservice.com.cy kami menggunakan templat yang diberikan sisi server untuk halaman terutama untuk menutupi bagian se. Dan menggunakan API untuk interaksi setelah memuat halaman. Karena kerangka kerja kami adalah MVC, semua fungsi pengontrol digandakan ke output json dan output html. Template bersih dan hanya menerima objek. Ini dapat diubah menjadi templat js dalam hitungan detik. Kami selalu memelihara templat sisi server dan hanya mengembalikan ke js berdasarkan permintaan.


1

Render isomorfik dan peningkatan progresif. Itulah yang saya pikir Anda tuju di opsi tiga.

rendering isomorfik berarti menggunakan templat yang sama untuk menghasilkan markup server-side seperti yang Anda gunakan dalam kode sisi klien. Pilih bahasa templating dengan implementasi sisi server dan sisi klien yang baik. Buat html yang dipanggang sepenuhnya untuk pengguna Anda dan kirimkan. Gunakan caching juga.

peningkatan progresif berarti mulai melakukan eksekusi dan rendering sisi klien dan acara mendengarkan setelah Anda memiliki semua sumber daya yang diunduh dan Anda dapat menentukan kemampuan klien. Kembali ke fungsi fungsional tanpa script klien bila memungkinkan untuk aksesibilitas dan kompatibilitas.

Ya, tentu saja menulis json api mandiri untuk fungsionalitas aplikasi ini. Tapi jangan melangkah terlalu jauh sampai Anda menulis json api untuk hal-hal yang berfungsi baik seperti dokumen html statis.


1

Server REST + klien JavaScript-berat adalah prinsip yang saya ikuti dalam pekerjaan saya baru-baru ini.

REST server diimplementasikan pada node.js + Express + MongoDB (kinerja penulisan yang sangat baik) + Mongoose ODM (bagus untuk pemodelan data, termasuk validasi) + CoffeeScript (saya akan menggunakan ES2015 sekarang sebagai gantinya) yang bekerja dengan baik untuk saya. Node.js mungkin relatif muda dibandingkan dengan teknologi sisi server lainnya, tetapi memungkinkan bagi saya untuk menulis API yang solid dengan pembayaran terintegrasi.

Saya telah menggunakan Ember.js sebagai kerangka JavaScript dan sebagian besar logika aplikasi dieksekusi di browser. Saya telah menggunakan SASS (SCSS khusus) untuk pra-pemrosesan CSS.

Ember adalah kerangka kerja matang yang didukung oleh komunitas yang kuat. Ini adalah kerangka kerja yang sangat kuat dengan banyak pekerjaan yang dilakukan baru-baru ini berfokus pada kinerja, seperti mesin rendering Glimmer baru (terinspirasi oleh React).

Tim Inti Ember sedang dalam proses mengembangkan FastBoot , yang memungkinkan Anda untuk mengeksekusi logika JavaScript Ember Anda di sisi server (khususnya node.js) dan mengirim HTML aplikasi Anda yang telah dirender sebelumnya (yang biasanya dijalankan di browser) ke pengguna. Ini bagus untuk SEO dan pengalaman pengguna karena dia tidak menunggu lama untuk ditampilkan.

Ember CLI adalah alat yang hebat yang membantu Anda untuk mengatur kode Anda dan melakukannya dengan baik dengan skala basis kode yang berkembang. Ember juga memiliki ekosistem tambahan sendiri dan Anda dapat memilih dari berbagai Ember Addons . Anda dapat dengan mudah mengambil Bootstrap (dalam kasus saya) atau Foundation dan menambahkannya ke aplikasi Anda.

Tidak untuk melayani semuanya melalui Express, saya memilih menggunakan nginx untuk menyajikan gambar dan klien yang beratnya JavaScript. Menggunakan nginx proxy sangat membantu dalam kasus saya:

upstream app_appName.com {
  # replace 0.0.0.0 with your IP address and 1000 with your port of node HTTP server
  server 0.0.0.0:1000;
  keepalive 8;
}

server {
  listen 80 default_server;
  listen [::]:80 default_server ipv6only=on;

  client_max_body_size 32M;

  access_log  /var/log/nginx/appName.access.log;
  error_log  /var/log/nginx/appName.error.log;

  server_name appName.com appName;

  location / {
     # frontend assets path
     root /var/www/html;
     index index.html;

     # to handle Ember routing
     try_files $uri $uri/ /index.html?/$request_uri;
  }

  location /i/ {
    alias /var/i/img/;
  }

  location /api/v1/ {
    proxy_pass  http://app_appName.com;

    proxy_next_upstream error timeout invalid_header http_500 http_502
http_503 http_504;
    proxy_redirect off;
    proxy_buffering off;
    proxy_set_header        Host            $host;
    proxy_set_header        X-Real-IP       $remote_addr;
    proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
  }
}

Pro: Saya suka pemisahan API & klien. Orang pintar mengatakan ini adalah jalan yang harus ditempuh. Besar dalam teori. Tampak canggih dan menarik.

Saya dapat mengatakan itu juga bagus dalam latihan. Keuntungan lain dari pemisahan REST API adalah Anda dapat menggunakannya kembali untuk aplikasi lain. Di dunia yang sempurna Anda harus dapat menggunakan REST API yang sama tidak hanya untuk halaman web, tetapi juga untuk aplikasi seluler jika Anda memutuskan untuk menulisnya.

Con: Tidak banyak preseden. Tidak banyak contoh ini dilakukan dengan baik. Contoh publik (twitter.com) merasa lamban & bahkan beralih dari pendekatan ini.

Semuanya terlihat berbeda sekarang. Ada banyak contoh melakukan REST API + banyak klien yang mengonsumsinya.


1

Saya memutuskan untuk memilih arsitektur Opsi # 2 untuk Infiniforms , karena menyediakan cara yang bagus untuk memisahkan UI dari logika bisnis.

Keuntungan dari ini adalah bahwa Server API dapat skala secara independen dari server web. Jika Anda memiliki banyak klien, maka situs web tidak perlu skala sama dengan server web, karena beberapa klien akan berbasis telepon / tablet atau desktop.

Pendekatan ini juga memberi Anda dasar yang baik untuk membuka API Anda untuk pengguna Anda, terutama jika Anda menggunakan API Anda sendiri untuk menyediakan semua fungsionalitas untuk situs web Anda.


1

Sebuah pertanyaan yang sangat bagus dan saya terkejut karena saya pikir ini adalah tugas yang sangat umum saat ini sehingga saya akan memiliki banyak sumber daya untuk masalah ini, namun ternyata tidak benar.

Pikiranku adalah sebagai berikut: - Membuat beberapa modul yang memiliki logika umum antara pengontrol API dan pengontrol HTML tanpa mengembalikan json atau rendering html, dan memasukkan modul ini di kedua pengontrol HTML dan pengontrol API, lalu lakukan apa pun yang Anda inginkan, jadi misalnya :

module WebAndAPICommon
    module Products

        def index
            @products = # do some logic here that will set @products variable
        end

    end
end


class ProductsController < ApplicationController
    # default products controlelr, for rendering HMTL pages 
    include WebAndAPICommon

    def index
        super
    end

end



module API
    class ProductsController
        include WebAndAPICommon

        def index
            super
            render json: @products
        end

    end
end

0

Saya telah menggunakan pendekatan hybrid di mana kami menggunakan Sinatra sebagai basis, ActiveRecord / Postgress, dll untuk menyajikan rute halaman (template ramping) untuk mengekspos REST API yang dapat digunakan aplikasi web. Dalam pengembangan awal, hal-hal seperti mempopulasikan opsi terpilih dilakukan melalui bantuan yang merender ke dalam template ramping, tetapi saat kami mendekati produksi, ini akan ditukar dengan panggilan AJAX ke REST API saat kami mulai lebih peduli tentang kecepatan memuat halaman dan sebagainya.

Hal-hal yang mudah dibuat di Slim ditangani dengan cara itu, dan barang-barang (mengisi formulir, menerima formulir data POST dari jQuery.Validation, submitHandlerdll., Semuanya jelas-jelas AJAX)

Pengujian adalah masalah. Saat ini saya bingung mencoba untuk mengirimkan data JSON ke Rack :: Test POST test .


0

Saya pribadi lebih suka opsi (3) sebagai solusi. Ini digunakan di hampir semua situs yang dimiliki oleh mantan (nama rumah tangga) saya. Ini berarti bahwa Anda bisa mendapatkan beberapa pengembang front-end yang tahu semua tentang Javascript, kebiasaan browser dan yang lainnya untuk mengkodekan ujung depan Anda. Mereka hanya perlu tahu "ikal xyz dan Anda akan mendapatkan beberapa json" dan pergilah.

Sementara itu, orang-orang kelas berat Anda dapat mengkode penyedia Json. Orang-orang ini tidak perlu berpikir tentang presentasi sama sekali, dan bukannya khawatir tentang backend yang rapuh, timeout, penanganan kesalahan yang anggun, kumpulan koneksi database, threading, dan scaling dll.

Opsi 3 memberi Anda arsitektur tiga tingkat yang bagus dan solid. Ini berarti hal-hal yang Anda keluarkan dari ujung depan adalah SEO friendly, dapat dibuat untuk bekerja dengan browser lama atau baru (dan yang dengan JS dimatikan), dan masih bisa menjadi template sisi klien Javascript jika Anda mau (sehingga Anda dapat lakukan hal-hal seperti menangani browser lama / googlebot dengan HTML statis, tetapi kirimkan JS pengalaman dinamis yang dibangun kepada orang-orang yang menggunakan browser Chrome terbaru atau apa pun).

Dalam semua kasus yang saya lihat Opsi 3, ini merupakan implementasi kustom dari beberapa PHP yang tidak dapat ditransfer antar proyek, apalagi keluar ke tanah Open Source. Saya kira PHP baru-baru ini mungkin telah diganti dengan Ruby / Rails, tetapi hal yang sama masih benar.

FWIW, $ current_employer bisa lakukan dengan Opsi 3 di beberapa tempat penting. Saya mencari kerangka kerja Ruby yang baik untuk membangun sesuatu. Saya yakin saya bisa merekatkan banyak permata, tapi saya lebih suka satu produk yang secara luas menyediakan templating, 'pengeritingan', otentikasi-opsional, solusi cache opsional memcache / nosql terhubung. Di sana saya gagal menemukan sesuatu yang koheren :-(


Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.