Рамки JavaScript для створення додатків на одній сторінці [закрито]


101

Моя мета - перенести існуючий веб-додаток до програми RESTful на одній сторінці (SPA). В даний час я оцінюю декілька рамок веб-додатків Javascript.


Мої вимоги такі:

  • RESTful рівень даних (наприклад, дані Ember)
  • МВ * -структура
  • Динамічні маршрути
  • Тестування-підтримка
  • Кодування за умовами
  • SEO-підтримка
  • Підтримка браузера-історії
  • Хороша (API-) документація
  • Готові до виробництва
  • Жива громада

Хребта

Використовується поточна програма backbone.js. Загалом, backbone.jsце приємний проект, але мені не вистачає чітко визначених структур, які визначають, що має відбуватися і як потрібно реалізовувати. Працюючи в більшій команді зі змінними розробниками, це призводить до якогось неструктурованого коду, важкого в обслуговуванні та важкого для розуміння. Ось чому я зараз шукаю рамки, які вже визначають усі ці речі.

Ембер

Я зазирнув в ember.jsостанні дні. Підхід здається мені дуже перспективним. Але, на жаль, код змінюється майже щодня. Отже, я не називаю це готовим до виробництва. І, на жаль, ми не можемо чекати, коли це буде версія 1.0. Але мені дуже подобається ідея, яка стоїть за цими рамками.

Кутовий

Angular.jsє також широко розповсюдженою основою, яку підтримує Google. Але я не зміг познайомитися з кутовим. Для мене структура здається якось незрозумілою, у поясненнях відсутня загальна відповідальність кожної частини фреймворку, а реалізація вважається безперебійною. Просто для того, щоб зрозуміти це: це лише моє особисте враження і, можливо, грунтується на відсутніх знаннях.

Бетмен і Метеор

Як я зрозумів, обидві рамки також потребують серверної частини. А оскільки ми просто хочемо БЕЗКОШТОВНОГО сервера - незалежно від мови, техніки чи програмного забезпечення, це не те, що ми хочемо. Крім того, API резервного інтерфейсу вже існує (RoR).

Нокаут , CanJS та хребет

Я не заглиблювався в ці три кандидати. Можливо, це буде моїм наступним кроком.


Тож мої запитання зараз:

  • Я пропускаю якісь хороші SPA-рамки?
  • Яку основу ви б запропонували / рекомендуєте?
  • Чи вдасться вам уникнути будь-якого із згаданих рамок?
  • Який досвід у великих програмах SP?

PS: Я хотів би порекомендувати чудовий поштовий блог від Стівена Андерсона (основний розробник від Knockout.js) про конференцію "Престол JS" (з 2012 року) та рамки JavaScript взагалі.

PS: Так, я знаю, що вже є питання щодо ТА. Але оскільки розробка для СПА настільки стрімка і швидка, більшість з них уже застаріли.


Відповіді:


81

Нещодавно мені довелося також визначитися зі структурою JavaScript SPA для проекту.

  • Ембер

    Подивився на Ембер рано і мав подібні думки, як і ви про нього - мені це дуже сподобалось, але здавалося, що все ще зарано використовувати ... приблизно половина підручників, які я прочитав, не працювала з поточною версією, тому що щось недавно змінився спосіб роботи шаблонів.

  • Хребта

    Основа була першою структурою, на яку ми серйозно подивилися. Я не впевнений, я розумію, чому ви вважаєте, що у нього немає "чітко визначених структур"? Хребта досить зрозуміла, як розділити модель і код перегляду. Можливо, ви маєте на увазі, що немає якогось шаблону програми? У будь-якому випадку, Магістральна мережа здається дійсно орієнтована на модель / REST-прив'язуючу частину, але насправді нічого не прописує для прив'язки перегляду. Якщо прив'язка моделі є важливою для вас, і ви використовуєте Rails, для цього слід вірити. На жаль, веб-сервіси для мого додатка насправді не збігалися, і мені довелося написати власне .syncта .parseметоди для всього. Розмежування коду Model і View було приємним, але, оскільки нам доведеться писати всі наші прив’язки з нуля, цього не варто.

  • Нокаут

    Нокаут - це як Ян до хребта Ян. Там, де хребет орієнтований на модель, нокаут є рамкою MVVM і орієнтований на вид. Він має observableобгортки для властивостей об’єкта JavaScript і використовує data-bindатрибут для прив'язки властивостей до вашого HTML. Зрештою, ми пішли з нокаутом, оскільки прив'язка перегляду була головним чином тим, що нам потрібно для нашого додатка. (... плюс інші, як обговорювалося пізніше ...) Якщо вам подобається прив'язка виду Knockout та прив'язка моделей Backbone, є також KnockBack, який поєднує обидві рамки.

  • Кутовий

    Подивилися на це після нокауту - на жаль, ми всі здалися досить задоволеними тим, як Knockout переглядав обов'язковість. Здавалося, набагато складніше і важче потрапити в нокаут. І він використовує купу спеціальних атрибутів HTML, щоб робити прив'язки, що я не впевнений, що мені подобається ... Можливо, я ще раз погляну на Angular пізніше, тому що, оскільки я натрапив на багатьох людей, які дуже люблять фреймворк - можливо, ми просто переглянув це занадто пізно для цього проекту.

  • Бетмен , Метеор , CanJS , хребет

    Насправді не надто уважно переглядали жодне з них. Хоча я знаю, що Spine є схожою основою для Backbone з явними об'єктами Controller, і написана в CoffeeScript.

  • Післямова

    Як я вже згадував, ми закінчилися з використанням нокауту, оскільки для нашого проекту важливіше було зосередити увагу на прив'язці поглядів. Ми також використали RequireJS для модуляризації, перехрестя та Hasher для обробки маршрутизації та історії, Jasmine для тестування, а також JQuery , Twitter Bootstrap та Underscore.js (і, мабуть, більше бібліотек, про які я зараз забуваю).

    Розробка додатків Javascript більше нагадує екосистему Java, ніж екосистему Rails. Rails надає міцну основу речей, які ви збираєтеся використовувати для кожного додатка (Rails Framework), а спільнота надає безліч налаштувань, крім цього (дорогоцінні камені). Java надає ... мову. І тоді ви можете вибрати Java EE або Spring або Play або Struts або Tapestry. І виберіть JDBC або Hibernate, TopLink або Ibatis, щоб поговорити з базою даних. І тоді ви можете використовувати Мураш або Мейвен або Градле для його побудови. І вибрати Tomcat або Jetty або JBoss або WebLogin запустити його. Так що більше уваги при виборі того, що вам потрібно , і то , що працює разом , ніж вибір ОФІЦІЙНИХ рамок для використання.


Дякую вам за детальну відповідь. Деякі питання стосовно knockout.js: 1) Чи надає він якийсь шар даних для збереження моделі в frontend / backkend синхронізовано? 2) Як підтримується включення одного шаблону в інший (ймовірно, разом з RequJS)? 3) Чи легко розмістити всі файли (моделі, перегляди, контролери, помічник тощо) окремо та в різні папки? Поруч із цими питаннями я визначив вашу відповідь прийнятою, оскільки ви дали багато інформації.
Крістофер Вілл

@ChristopherВитаю! 1.) Настільки ж, як хребет залишає його вам для перегляду прив'язки, нокаут залишає його вам для REST-> прив'язки моделі. У документації є кілька прикладів - knockoutjs.com/documentation/json-data.html або ви можете використовувати KnockBack для комбінування версії REST-> Модельної сукупності.
Нейт

2.) Це залежить від того, що ви маєте на увазі - Knockout має вбудовану прив'язку даних, яка дозволяє вам брати колекцію з моделі, прив’язувати до тегу списку або тегу таблиці та для кожного рендерінгу заданого шаблону. Що стосується великого масштабу, наприклад, як ви формуєте свої загальні погляди та заміняєте їх - це все-таки дещо посібник (принаймні, як я це роблю, все ще навчаюсь). але вам все одно потрібно вказати логіку та замінити діви - я це просто роблю методами, які відповідають моїм маршрутам. Можливо, ви зможете підключити нокаутські події, щоб це зробити.
Нейт

3.) RequireJS - це те, що дозволяє вам це зробити.
Нейт

Спасибі Нейт. Думаю, я спробую KnockBack спробувати .. звучить щось багатообіцяюче. І, звичайно, з вашими згаданими бібліотеками (вимагаютьJS, перехрестя тощо)
Крістофер Буде

8

Минув рік, як ми розпочали розробку нашого проекту хмарних сервісів з численними SPA, тому було великим рішенням, яку рамку JavaScript використовувати для нашого інтерфейсу для задоволення наших потреб RESTful архітектури. і після безлічі досліджень ми в кінцевому підсумку використовували рамку Dojo .

основні функції, які вам сподобаються:

  1. освічена громада та команда, яка придумала ідеальний дизайн. чудові умовності та модульна / об'єктно-орієнтована архітектура. з поглядами на програмування CrossBrowser :)
  2. СР * структура. створюйте віджети інтерфейсу користувача із зовнішніми шаблонами .htm та для виробництва, збирайте всі ваші шаблони javascript та шаблони в єдиний, мінімізований та маленький .js
  3. будувати класи з успадкуванням. налаштування властивостей, безліч функціональних інструментів.
  4. паб / підмеханізм (названі теми в доджо)
  5. безліч елементів користувальницького інтерфейсу, від контролю форми перевірки, діалогових вікон / підказок до важкого, широко налаштованого (але легкого) діаграми та рішення сітки даних.
  6. хороша система тестування блоків під назвою DOH. у нього також є робот для відтворення дій миші / клавіатури.
  7. інструмент запитів (наприклад, JQuery) на ім'я NodeList з усіма функціями jquery і навіть безліччю його плагінів.
  8. і хороша, але не настільки повна частина. він має модуль JsonRest, який можна використовувати з вашими послугами REST. це зручний інструмент, але він не має багатьох функцій.

Щоб подолати ці проблеми, ми розробили AJAX-опитувальник, керування помилками та універсальне рішення для завантаження та оповіщення. ми це зробили дуже легко, використовуючи рамкові конвенції та структури доджо. якщо ви не хочете цього робити, можливо, вам доведеться використовувати інший фреймворк для цієї частини.

дивлячись на чудові SPA в Інтернеті, ви дізнаєтесь, що всі вони налаштовані та використовують декілька рамок. але наш досвід лише з Доджо був фантастичним. і тому я пропоную вам не думати про будь-які інші рамки, оскільки всі вони є неповними для SPA. але в кінцевому підсумку у вас є також інший варіант (який я не рекомендую і не маю детальної інформації). використовуйте структуру JAVA, яка здатна будувати SPA, автоматично генеруючи UI та JavaScript.


Привіт! Ви використовуєте Dojo зараз? Ви ведете блог про Dojo?
Дунаєвський Максим

Привіт! Так, ми все ще використовуємо його для того ж продукту і підтримуємо його. Внутрішня рамка написана на вершині доджо, і ми додаємо до неї щодня. Ні, я не маю для цього блогу. якщо ви збираєтеся почати з цього, це сьогодні вважається старим інструментом. Вони все ще працюють над Dojo 2.0, але наразі може бути краще використовувати інші варіанти. у нас у верхній частині списку Реакція / Кутова.
Єдиноріг
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.