В этой публикации сделаем обзор пяти наиболее интересных и перспективных JavaScript фреймворков первой половины 2016 года. В обзоре собраны вместе различные типы библиотек, которые предоставляют различный функционал — от создания UI компонентов к изоморфному JavaScript. Это не будет глубокий и детальный технический анализ, скорее это краткое введение в ключевые особенности.
Ниже список наших фреймворков:
Теперь, пришло время взглянуть на них поближе.
Давайте начнем с Polymer. Он был создан в Google и причиной его возникновения было желание использовать свои собственные веб-компоненты. Если вы не знакомы с этим термином, посетите этот сайт. Он откроет вам мир веб-компонентов и поможет понять, почему толпы веб-разработчиков считают их будущим интернета.
Говоря о будущем, Polymer использует технологии, которые еще не присутствуют в современных браузерах, таких как Shadow DOM, Custom Elements и многие другие. Для того, чтобы все работало, Polymer предлагает polyfills. Можно сказать, что Polymer это коллекция polyfills и синтаксического сахара.
Теперь поговорим о доступных UI элементах. Вот так выглядит каталог элементов Polymer:
Второй элемент этой таблицы — это бумажный элемент, который представляет собой набор визуальных элементов Google Material Design (например: элементы управления, макеты, переходы и скроллинг эффекты). Пройдите на эту демо страницу, чтобы увидеть, как это выглядит.
Пошаговое руководство для новичка, поможет вам изучить основы Polymer и создать свое первое приложение.
Aurelia была создана бывшим разработчиком AngularJS и, по его словам, «Aurelia имеет первую в своем роде “адаптивную» привязку данных, которая позволяет проводить двустороннюю привязку данных между JavaScript и DOM (в том числе веб-компонентов)." Звучит интересно.
Вот список основных функций:
Документация достаточно подробная и содержит примеры кода, которые могут помочь вам понять всю концепцию. Также вы можете посмотреть видео туториал, который можно найти на главной странице.
Aurelia довольно таки расширяемая. Так как Aurelia — всего лишь ряд компонентов, вы всегда сможете поменять на те, которые соответствуют вашему приложению. Вы можете изменить маршрутизатор или систему связывания, или функциональные возможности наблюдения, в общем — все, что вам захочется.
Фреймворк Meteor — это так называемый изоморфными JavaScript. В общем, этот термин означает «JavaScript-приложения, которые работают как на стороне клиента, так и на стороне сервера». Таким образом, вы можете написать свой код один раз и использовать его как на сервере для статического рендеринга страницы, так и на клиенте.
Meteor — это JavaScript фреймворк с открытым исходным кодом, написанный на Node.js. В наши дни трудно найти пользователя, который не поморщиться всякий раз, когда видит веб-страницу, которая перегружается каждый раз после изменения настроек. Хорошая новость заключается в том, что Meteor был первоначально разработан для создания real-time приложений. Действия пользователя или изменения в базе данных вызывают немедленные изменения, и такое поведение не требует какого-либо дополнительного кода. Вот только как работает Meteor.
Этот фреймворк упрощает процесс разработки путем устранения необходимости знать кучу разных языков программирования. Front-end, back-end и базы данных управляются только с помощью JavaScript.
Meteor легко изучается и в него достаточно легко погрузиться. Выполните несколько команд в терминале, и вы получите рабочее приложение. Если вы не верите мне, ознакомьтесь с этим руководством по началу работы. Кроме того, есть возможность развертывания проекта на сервере, используя одну простую команду.
Как вы можете видеть, Meteor очень дружелюбный фреймворк для начинающих разработчиков и глядя на то, как он поддерживается сообществом, каждый от опытного до начинающего специалиста должен его попробовать.
Webix это JavaScript и HTML5 фреймворк, который поможет вам создать кросс-платформенные веб-приложения с адаптивным интерфейсом. Он состоит из более чем 70 компонентов, от простых ползунков до больших виджетов. Вы можете найти список компонентов вместе с API на этой странице.
Разработчики Webix уделили особое внимание пользователям мобильных устройств, предоставляя возможность создать приложение, которое будет выглядеть и работать нормально, независимо от того, какое устройство вы используете. Приложения прекрасно работают на Android, IOS, Windows 8 и на Firefox ОС. Они также добавили возможность использовать Material Design.
Центр разработки Webix содержит несколько полезных инструментов. Например, есть Skin Bulider и Form Builder, который позволяет создавать формы, определив нужные поля, расположение и автоматически генерировать код для вашей формы. Есть даже визуальный конструктор, который позволяет создавать drag-and-drop приложения, а затем получать сгенерированный код. Вот как это выглядит:
Страница с документацией полна информации для разработчиков разных уровней. Там вы найдете инструкции для быстрого старта, обучающие программы и т.д. Если вы хотите как можно быстрее начать программировать, вы можете попробовать эту игровую площадку.
Еще один фреймворк, который был построен интернет-гигантом Facebook.
Одной из наиболее важных особенностей является высокая производите��ьность, которая достигается за счет использования виртуальной DOM. Виртуальный DOM отображает только данные. Что позволяет проще определить изменения.
Еще одной особенностью является использование языка JSX. Это XML-подобный язык, который не является обязательным и не требует использования React. Перейдите на веб-сайт проекта, чтобы увидеть разницу между написанием компонентов в JSX и JavaScript. На первых парах это может выглядеть непонятно, но на это стоит обратить внимание.
Поток данных. Обычно, когда вы используете MVC фреймворки, вы сталкиваетесь с ситуацией, когда views взаимодействуют друг с другом, что приводит к трудностям хранения данных в синхронизации и делает ваше приложение более сложным.
React будет хорошим выбором, если вы планируете создавать многократно используемые UI компоненты. Легко достать части ранее использованного кода и переделать его. Пройдите на страницу с документацией, чтобы узнать, как все работает.
В области веб-разработки всегда будет присутствовать необходимость следовать тенденциям. На сегодня веб-компоненты и изоморфный JavaScript являются теми вещами, на которые нужно обратить особое внимание при планировании следующего проекта.
Надеюсь, что эта статья была полезной и поможет вам принять решение.
Автор: Иван Петренко
Ниже список наших фреймворков:
Теперь, пришло время взглянуть на них поближе.
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 являются теми вещами, на которые нужно обратить особое внимание при планировании следующего проекта.
Надеюсь, что эта статья была полезной и поможет вам принять решение.
Автор: Иван Петренко
