ilya42 April 18, 2012 at 03:42 PM

TodoMVC — «Hello, world» на стероидах

Tutorial

Cуществует уже несколько десятков JavaScript-фреймворков для построения сложных приложений в браузере. Чтобы сравнить их между собой и выбрать наиболее подходящий, примитивного примера вроде классического «Hello, world» явно недостаточно. Более сложные и реалистичные примеры программ в книгах и документации каждого фреймворка могут сильно отличаться, и сравнивать их между собой затруднительно. Проект TodoMVC решает именно эту проблему. Это набор примеров реализации одного и того же простого, но вполне законченного веб-приложения с использованием разных фреймворков + эталонный пример на чистом JavaScript.

Приложение TodoMVC — это список дел. Дела можно добавлять, помечать как выполненные и удалять. Список должен сохраняться в локальном хранилище браузера. Приложение должно по возможности использовать стандартный шаблон HTML и CSS. Вот подробная спецификация приложения.

В текущей версии TodoMVC (0.3) есть уже 18 примеров реализации приложения на базе:

Backbone.js
Backbone.js + RequireJS (с использованием AMD)
Ember.js
JavaScriptMVC
Spine.js
Sammy.js
KnockoutJS (MVVM)
Knockback.js
Dojo
Closure
YUILibrary
AngularJS
Angular + PersistenceJS
Ext.js
Broke.js
Fidel.js
jQuery
Чистого JS

На сайте проекта можно погонять живые демки каждой реализации. Проект активно развивается: больше 2000 подписчиков на Гитхабе, последние правки 2 дня назад, в начале 2012 года к основателю проекта Addy Osmani присоединились ещё два ключевых разработчика.

Tags:

Comments 17

mark_ablov April 18, 2012 at 04:07 PM
+1
Очень странно, ибо во-первых, имплементируется разный функционал. Да, всё это to-do, но отличаются мелочами и доступными возможностями.
Во-вторых, баги.
- ilya42 April 18, 2012 at 04:22 PM
  +3
  Да, есть такое дело. Если бы там абсолютно все примеры выглядели и вели себя идентично и идеально — была бы просто сказка. Как и многим открытым некоммерческим проектам, TodoMVC не хватает «вылизанности». Тем не менее, различия между разными вариантами приложения достаточно незначительны, чтобы можно было сравнивать именно фреймворки.
  - Mourner April 23, 2012 at 05:01 PM
    
    0
    На то это и open source, чтобы в итоге получить идеальную и идентичную реализацию всех вариантов.
imater April 18, 2012 at 04:07 PM
0
А тем временем, я не могу подобрать себе нормального ToDo с древовидными делами, регулярными делами, календарём. Нужно, чтобы работал в iPhone, Mac и PC. И при этом слабо зависил от Интернета. Обожаю MLO, но нет версии для Мак.

Надеюсь хоть браузерные версии ToDo смогут работать на всех платформах.
- Makito April 18, 2012 at 04:14 PM
  0
  попробуйте wunderlist
  - impwx April 18, 2012 at 04:22 PM
    
    +1
    WunderList / WunderKit очень приятно сделаны, но нет древовидной структуры.
    Мой выбор — браузерный Todoist. Работает быстро и удобно, дерево задач, есть мобильные версии (правда они пока не особо) — и есть достаточно функциональная бесплатная версия. Если бы только в нем можно было шарить задачи между пользователями…
    - second_pilot April 19, 2012 at 02:25 AM
      
      0
      
      Гугловский тоже ничего. Заодно интегрируется в почту и календарь
camelos April 18, 2012 at 07:03 PM
0
Чистого JS не нашёл =(
- ilya42 April 18, 2012 at 07:20 PM
  +5
  Vanilla JS. «Vanilla» или «Plain vanilla» в английском означает «простой», «без наворотов». Термин происходит от белого мороженного без наполнителей и украшений. en.wiktionary.org/wiki/vanilla#Adjective
  - camelos April 19, 2012 at 07:20 AM
    
    0
    Илья, спасибо огромное! Честно, не знал этого. Теперь кое-что другое прояснилось ))) Спасибо!
ArtyomTrityak April 18, 2012 at 09:01 PM
0
jquery TODO MVC вообще яд…
- neyronius April 24, 2012 at 10:20 PM
  0
  Нравится или нет?
  - ArtyomTrityak April 25, 2012 at 09:46 AM
    
    0
    Нет, конечно. Это же не структура jQuery приложения. Где jq функции / виджеты? Где неймспейсы? Просто тупо свалка кода
    - neyronius April 25, 2012 at 09:55 AM
      
      0
      
      Вроде в app.js выделены объекту Utils и App, выполняющие роль неймспейсов. Виджеты скорее всего не нужны в этом простом проекте.
Litiy April 19, 2012 at 07:40 AM
0
RequireJS странно выглядит в сочетании с backbone.js, т.к. очень многие разработчики используют sprockets, uglifier и coffeescript, что позволяет компилировать всё в один сжатый файл.
А вообще где-то год назад видел данный (или подобный) проект, неплохое сравнение синтаксиса. Позволяет новичкам выбрать какой из фреймворков ближе. Я остановился на backbone благодаря хорошей поддержке в rails и документации, в отличие, например, от бывшего sproutcore 2 — amber.js.
- kuzemchik April 29, 2012 at 03:20 PM
  0
  require.js тоже позволяет собирать все зависимости в один файл requirejs.org/docs/optimization.html
oWeRQ April 22, 2012 at 06:58 PM
0
Имхо, плоский список задач плохо дает понять насколько сложно написать реальное приложение. Например, в качестве «игрушечного» проекта попытался сделать todo с тегами на backbone.js, вылезает столько косяков… и от любого изменения все ломается как карточный домик.

LocalStorage — хорошо, но только локальное сохранение для веб приложения немного глупо, или нужна синхронизация, или только общение с сервером, использование LocalStorage не гарантирует, что с минимальными изменениями это приложение будет работать с асинхронным хранилищем.