Ниже список наших фреймворков:
Теперь, пришло время взглянуть на них поближе.
Polymer
Давайте начнем с Polymer. Он был создан в Google и причиной его возникновения было желание использовать свои собственные веб-компоненты. Если вы не знакомы с этим термином, посетите этот сайт. Он откроет вам мир веб-компонентов и поможет понять, почему толпы веб-разработчиков считают их будущим интернета.
Говоря о будущем, Polymer использует технологии, которые еще не присутствуют в современных браузерах, таких как Shadow DOM, Custom Elements и многие другие. Для того, чтобы все работало, Polymer предлагает polyfills. Можно сказать, что Polymer это коллекция polyfills и синтаксического сахара.
Теперь поговорим о доступных UI элементах. Вот так выглядит каталог элементов Polymer:
Второй элемент этой таблицы — это бумажный элемент, который представляет собой набор визуальных элементов Google Material Design (например: элементы управления, макеты, переходы и скроллинг эффекты). Пройдите на эту демо страницу, чтобы увидеть, как это выглядит.
Пошаговое руководство для новичка, поможет вам изучить основы Polymer и создать свое первое приложение.
Aurelia
Aurelia была создана бывшим разработчиком AngularJS и, по его словам, «Aurelia имеет первую в своем роде “адаптивную» привязку данных, которая позволяет проводить двустороннюю привязку данных между JavaScript и DOM (в том числе веб-компонентов)." Звучит интересно.
Вот список основных функций:
- Написана на ES 2016. Нет внешних зависимостей, кроме polyfills;
- Вместо того, чтобы брать монолитного каркасного подхода, Aurelia состоит из более мелких модулей;
- Использование веб-компонентов;
- Двусторонний databinding;
- Тестируемая;
- Поддержка большого количества языков. Aurelia использует ES5, ES 2015, ES 2016 и TypeScript.
Документация достаточно подробная и содержит примеры кода, которые могут помочь вам понять всю концепцию. Также вы можете посмотреть видео туториал, который можно найти на главной странице.
Aurelia довольно таки расширяемая. Так как Aurelia — всего лишь ряд компонентов, вы всегда сможете поменять на те, которые соответствуют вашему приложению. Вы можете изменить маршрутизатор или систему связывания, или функциональные возможности наблюдения, в общем — все, что вам захочется.
Meteor
Фреймворк Meteor — это так называемый изоморфными JavaScript. В общем, этот термин означает «JavaScript-приложения, которые работают как на стороне клиента, так и на стороне сервера». Таким образом, вы можете написать свой код один раз и использовать его как на сервере для статического рендеринга страницы, так и на клиенте.
Meteor — это JavaScript фреймворк с открытым исходным кодом, написанный на Node.js. В наши дни трудно найти пользователя, который не поморщиться всякий раз, когда видит веб-страницу, которая перегружается каждый раз после изменения настроек. Хорошая новость заключается в том, что Meteor был первоначально разработан для создания real-time приложений. Действия пользователя или изменения в базе данных вызывают немедленные изменения, и такое поведение не требует какого-либо дополнительного кода. Вот только как работает Meteor.
Этот фреймворк упрощает процесс разработки путем устранения необходимости знать кучу разных языков программирования. Front-end, back-end и базы данных управляются только с помощью JavaScript.
Meteor легко изучается и в него достаточно легко погрузиться. Выполните несколько команд в терминале, и вы получите рабочее приложение. Если вы не верите мне, ознакомьтесь с этим руководством по началу работы. Кроме того, есть возможность развертывания проекта на сервере, используя одну простую команду.
Как вы можете видеть, Meteor очень дружелюбный фреймворк для начинающих разработчиков и глядя на то, как он поддерживается сообществом, каждый от опытного до начинающего специалиста должен его попробовать.
Webix
Webix это JavaScript и HTML5 фреймворк, который поможет вам создать кросс-платформенные веб-приложения с адаптивным интерфейсом. Он состоит из более чем 70 компонентов, от простых ползунков до больших виджетов. Вы можете найти список компонентов вместе с API на этой странице.
Разработчики Webix уделили особое внимание пользователям мобильных устройств, предоставляя возможность создать приложение, которое будет выглядеть и работать нормально, независимо от того, какое устройство вы используете. Приложения прекрасно работают на Android, IOS, Windows 8 и на Firefox ОС. Они также добавили возможность использовать Material Design.
Центр разработки Webix содержит несколько полезных инструментов. Например, есть Skin Bulider и Form Builder, который позволяет создавать формы, определив нужные поля, расположение и автоматически генерировать код для вашей формы. Есть даже визуальный конструктор, который позволяет создавать drag-and-drop приложения, а затем получать сгенерированный код. Вот как это выглядит:
Страница с документацией полна информации для разработчиков разных уровней. Там вы найдете инструкции для быстрого старта, обучающие программы и т.д. Если вы хотите как можно быстрее начать программировать, вы можете попробовать эту игровую площадку.
React
Еще один фреймворк, который был построен интернет-гигантом Facebook.
Одной из наиболее важных особенностей является высокая производительность, которая достигается за счет использования виртуальной DOM. Виртуальный DOM отображает только данные. Что позволяет проще определить изменения.
Еще одной особенностью является использование языка JSX. Это XML-подобный язык, который не является обязательным и не требует использования React. Перейдите на веб-сайт проекта, чтобы увидеть разницу между написанием компонентов в JSX и JavaScript. На первых парах это может выглядеть непонятно, но на это стоит обратить внимание.
Поток данных. Обычно, когда вы используете MVC фреймворки, вы сталкиваетесь с ситуацией, когда views взаимодействуют друг с другом, что приводит к трудностям хранения данных в синхронизации и делает ваше приложение более сложным.
React будет хорошим выбором, если вы планируете создавать многократно используемые UI компоненты. Легко достать части ранее использованного кода и переделать его. Пройдите на страницу с документацией, чтобы узнать, как все работает.
Заключение
В области веб-разработки всегда будет присутствовать необходимость следовать тенденциям. На сегодня веб-компоненты и изоморфный JavaScript являются теми вещами, на которые нужно обратить особое внимание при планировании следующего проекта.
Надеюсь, что эта статья была полезной и поможет вам принять решение.
Автор: Иван Петренко
Комментарии (43)
nazarpc
01.08.2016 10:46+9Polymer как-бы не фреймворк и даже не близко.
Polymer is a lightweight library built on top of the web standards-based Web Components API's, and makes it easier to build your very own custom HTML elements
Да, есть наборы компонентов, с их помощью можно практически приложения собирать декларативно, но это НЕ фреймворк в том смысле, в котором им являются другие представленные проекты.
То же самое о React — он только view слой, и ничего больше, он сам по себе вообще достаточно скуден без экосистемы и точно не является фреймворком.
A declarative, efficient, and flexible JavaScript library for building user interfaces
claygod
01.08.2016 10:48+11Странно, что Angular отсутствует в этом списке
MikielD
01.08.2016 11:17+7Странно что VueJs в этом списке тоже нету, ведь спрос на этот Фреймворк растёт.
Bellicus
01.08.2016 11:22+15Давайте откровенно. Список в целом странный, без каких-либо внятных аргументация и доводов. В таком русле можно, в принципе, перечислить любые 5 фреймворков и сказать, что они самые перспективные))
acupofspirt
01.08.2016 13:12А что, этот VueJs и в самом деле так хорош как про него рассказывают?
Darkside73
01.08.2016 16:47По фичам не хуже, чем остальные и проще для освоения (в случае с ангуляром — намного проще). Активно развивается: на подходе мажорный релиз (версия 2.0). Еще к нему vuex есть — архитектурный каркас для построения приложений
Akuma
01.08.2016 11:40+5Polymer — не фреймворк
Aurelia — вроде когда-то мелькало, но видно не взлетело
Meteor — взлетело, но уже падает
Webix — аналогично Aurelia
React — не фреймворк
Хотя бы опрос добавьте с болеее широким выбором, посмотрим кто чем пользуется на хабре. Только не называйте фреймворком все и вся.
sombik
01.08.2016 18:33Webix — более «легкая» альтернатива ExtJS от Sencha. И по стилю похожа, и по компонентам. Только почему-то ни в одном обзоре про ExtJS нет ни слова, хотя по количеству функционала и компонентами — даст фору любому другому фреймворку. Есть конечно много минусов в ней, но не об этом вопрос.
PQR
01.08.2016 12:07+2Про сравнение современных JS фреймворков рекомендую гораздо более дельный и детальный разбор от создателя Aurelia. Может показаться, что он предвзят, но автор действительно хорошо осветил вопрос.
- Angular 1
- Angular 2
- Polymer
- React
- Ember
- Aurelia
Choosing a JavaScript Framework — Rob Eisenberg
wispoz
01.08.2016 12:48Чем WebIx отличается от Sencha Extjs? Мне кажется с настройками стилей и там и там будет ад.
А компонентов для ExtJS побольше, да и мобильная версия есть (Sencha Touch).
Да и в 6-й версии ExtJS есть двухсторонний биндинг, (ViewModel, ViewController ) и так далее.
xGromMx
01.08.2016 12:57Как человек, который поработал с Aurelia на проекте, проклинаю ее всем чем можно. Нормальной валидации, форм и всего такого нет, что нужно бизнесу. После этой медузы, перешел на Angular2 и доволен как слон был. Angular2 — это мощная, уже готовая к продакшену полная платформа. Хотите Redux? Есть круче NgRx, все на реактивных состояниях, сайд эффекты красиво отделяются от чистых данных за счест Effects (поведение похоже как у sagas только лучше и более декомпозируемое) Также я за выбирать под продакшен React и его экосистему.
Хотите что-то задекларировать?
Да! С Aurelia больше никогда не работать!
Moxa
01.08.2016 13:05+1а riot кто-нибудь пробовал?
gentee
01.08.2016 21:01Я пробовал, мне понравилось. После Angular v1 все было понятно, компактно и работало как нужно. К сожалению, так и не решил, что на нем стоящее сделать и по работе стал плотно загружен.
Moxa
01.08.2016 21:04я все пытаюсь продавить его использование на работе, но проект уже начат на реакте, переписывать никто не даст =(
gentee
01.08.2016 21:17А чем React не нравится? Riot — это скорее вещь для души, так как сейчас как правило выбирают между Angular и React и малоизвестный Riot совсем не котируется.
Moxa
01.08.2016 21:21что-то он слишком большой и тяжелый, наше приложение инициализируется 2 секунды на моем мобильнике, да jsx довольно страшный после riot'a
mr_tron
01.08.2016 14:18-2WebAssembly (и построенные на нём фремворки) — перспективная штука. А всё эти тормозные поделия, которые и без того не быстрый js превращают в черепаху, я надеюсь, умрут в мучениях.
Veikedo
01.08.2016 14:56+2Ну да. Вот сейчас придёт WebAssembly и мир станет прекрасным.
Дело-то не в производительности движка/фреймворка, а в производительности программиста при работе с ними.
movl
01.08.2016 14:57+1Но проблема останется в медленной работе с DOM и прочими интерфейсами, предоставляемыми браузером, которые никуда не денутся с приходом WebAssembly, или я чего-то не понимаю? Если, например, нужно отобразить 10 000 строк таблицы, данные для которых были получены по сети, а потом их изменять, перерисовывать и все такое, как тут поможет WebAssembly? В данный момент я вижу области применения этой технологии, там где нужны вычисления, например: обработка изображений, видео, звука, игровая физика и т. д. На счет не быстрого js, у меня тоже есть сомнения как ни странно.
nazarpc
01.08.2016 16:24-2Не пишите чушь. DOM невероятно, фантастически быстр!
А то, что вместо изменение одной маленькой ноды где-то глубоко народ вызывает
element.innerHTML += 'xyz';это никакой WebAssembly не исправит.
Те же Polymer и React ускоряют работу страницы именно аккуратным обращением к DOM (хотя и используют разные подходы).
Но в целом — да, WebAssembly может и сделает меньше нагрузку на CPU в рантайме, но больше чем на пару процентов прироста я бы не рассчитывал в общем случае. Вот для 3D графики, где много CPU времени использует именно JS код — там будет прирост.
movl
01.08.2016 17:23Возможно я не совсем ясно выразился про DOM, поэтому пример конкретный привел, где мало что будет зависеть от производительности непосредственно js, по моему мнению.
И вы сами же написали:
Те же Polymer и React ускоряют работу страницы именно аккуратным обращением к DOM
Я собственно про обращения к API движка и говорил, и про то, что производительность зачастую упирается именно в это, по крайней мере в этих библиотеках.
mr_tron
01.08.2016 20:02-1А зачем вам нужен будет DOM? Можно будет делать нормальные нативные приложения.
movl
01.08.2016 20:17Вот сейчас сложно было. Если WebAssembly разрабатывается как язык, который выполняется в браузере, о какой нативности идет речь? И что в данном контексте нормальность?
mr_tron
01.08.2016 22:07-2Про флэш слышали? И сайты на флэше. Много там дом элементов было? По сути это аналог. Только в этот раз не проприетарщина от левой конторы, а открытый стандарт.
Laney1
01.08.2016 15:08+3Одной из наиболее важных особенностей является высокая производительность
ну это миф. В бенчмарках у всех перечисленных библиотек (или фреймворков?) примерно одинаковые цифры
affka
А Meteor точно перспективный? Мне кажется уже давно угасает его популярность… Есть вообще какая-то статистика использования представленных фреймворков?
movl
Мне кажется, тут смотря что с чем сравнивать. В данном посте нет сравнения, конечно, но в одну кучу запихано как сладкое так и зеленое, и создается впечатление, что все эти фреймворки/библиотеки про одно и тоже. Если конкретно про Meteor, то все вышеперечисленное можно использовать вместе с ним. И, мне кажется, искать корреляцию между популярностью Meteor и, например, React, будет не верно. Есть даже и подобные решения, а можно и что-то свое сделать, но в любом случае Meteor занял свою нишу, и чувствует себя там комфортно.
Слежу за Meteor постоянно и мне нравится как развивается проект в последнее время, становится более взрослым что ли. Также интересно будет посмотреть на Apollo. И какого-то прекращения разработки Meteor, отказа от поддержки или вообще умирания тоже не вижу в ближайшем будущем.
gigimon
Не видите умирания? А релизы 1.3 и недавний 1.4? Не принесли ничего, хотя версию сменили. Хорошие изменения у них только в документации, там действительно, очень продвинулись, но в плане функциональности как-то на месте стоят.
n0ne
Т.е. новые node.js и MongoDB как минимум — это фигня?!
gigimon
Конечно фигня, т.к. к самому фреймворку они отношения имеют маленькое. А mongodb у меня вообще внешняя используется
n0ne
Уверен, что имеет большое значение для фреймворка. Для конечных пользователей — да, изменений не много. Да и раньше 1.5 они ничего и не обещали.
movl
В плане функциональности, собственно про что и говорил, сейчас они делают Apollo, который будет использоваться в метеоре. Да и в целом они движутся по поставленным задачам, которые предполагают большие изменения и параллельно улучшают качество продукта: изменяются в лучшую сторону стабильность, производительность, документация, появляются какие-то дочерние проекты и т. д. И все это с какой-то проработкой делается, с учетом предыдущих ошибок.
По крайней у меня есть некоторая уверенность в этом проекте и текущий путь развития мне нравится. А я именно на нем пишу уже в течение пары лет, наверное, различные внутренние решения для компании, с возможностью совместной работы. Начинал еще с версии 0.8.3 вроде и собственно отслеживал путь развития проекта, с тех времен. Возможно я ошибаюсь, конечно, но достойных аналогов в этой нише пока не вижу.
gigimon
Я небольшой проект с 0.7 держу и динамика развития до 1.1 была очень высокой, но потом притихли и каждый релиз не несет значительных изменений. Побочные проекты это хорошо, но как бы не затмили они основной проект.
Возможно вы и правы, что сейчас они сосредоточились на стабильности и стремятся к enterprise ready. Я сам жду какой-нибудь 2.0. Если до него и в нем будут такие же мелкие изменения, то придется уходить
gigimon
Я бы сказал даже не популярность, а сама разработка.