Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Frameworks
Webdesign

Гид для Новичков по Выбору JavaScript Фреймворка

by
Difficulty:IntermediateLength:MediumLanguages:

Russian (Pусский) translation by Anton Lisovsky (you can also view the original English article)

Довольно неясная ситуация складывается, когда дело касается выбора нужного JavaScript  фреймворка. Эта статья призвана помочь начинающему фронтенд разработчику сориентироваться при выборе подходящего фронтенд фреймворка. Мы разберём основы и синтаксис каждого, упомянутого здесь фреймворка, помимо этого я предоставлю список полезных, обучающих ресурсов. 

Что Такое JavaScript Фреймворк?

В мире фронтенд разработки “фреймворк (framework)” может означать JavaScript библиотеку созданную для отображения интерактивных интерфейсов, основанных на вводимых данных. Он нужен для отображения информации в тот момент когда пользователь взаимодействует с интерфейсом. Все эти библиотеки немного друг от друга отличаются, но цель у них всегда одна; показать новую информацию, данные, когда было совершено какое-либо действие.

Давайте подробнее разберём эти мощные фреймворки, которые помогут реализовать поставленную задачу.

Популярные JavaScript Фреймворки

Существует много опций при выборе фреймворка, далее список наиболее популярных на сегодняшний день: Vue, React, Angular и Ember. Каждый из них был выбран согласно росту сообщества, стабильности, активности на Github, временному промежутку при котором технология была доступна разработчикам, а также основываясь на том, используется-ли технология большим количеством компаний и разработчиков.

Vue

Первый Коммит 27-ого Июля, 2013-ого
Размер Файла: 27.5KB минифицированный

Vue - прогрессивный, доступный фреймворк, в то же время многофункциональный и производительный. Если вам знакомы основы старого доброго HTML, CSS, JS вы сможете с легкостью освоить Vue.

“Ядро библиотеки создано только для работы с логикой представления (view), и его легко интегрировать с другими библиотеками и проектами. С другой стороны, Vue отлично подойдёт для создания сложных одностраничных приложений (SPA) когда используется с современными инструментами и библиотеками.” - вступление к документации по VueJS

Ниже мы можем увидеть пример синтаксиса простого “Hello World”:

Более интересный пример с использованием значений атрибутов (“attribute values”) в разметке:

Vue.js позволяет вам обрабатывать данные вводимые пользователей, создавать компоненты-шаблоны (component templates), привязывать данные к структуре DOM с условиями и циклами, а также декларативное отображение (“declarative rendering”), с простым синтаксисом, основанное на спецификации веб-компонентов.

Ресурсы для Обучения:

React

Первый Коммит 29-ого Мая, 2013-ого
Размер Файла: 7.3KB минифицированный С Дополнениями: 11.3KB минифицированный

Разработчики React заявляют, что данная библиотека предназначена для создания интерфейсов для работы с динамичными данными. Она бала разработана работниками Facebook и является проектом с открытым исходным кодом. Вы можете себя почувствовать неуютно когда я сообщу вам, что нужно писать HTML в JavaScript, но к сожалению так работает React.

Давайте разберём пример синтаксиса прямиком из вступительного туториала документации React. В этом примере показано создание так называемого “Component subclasses”, также имеются и другие типы компонентов. Как вы наверно могли заметить, синтаксис похож на XML:

React идёт с дополнительными опциями, называемые аддонами, которые представляют из себя набор полезных модулей. Эти модули включают в себя инструменты для облегчения работы с анимациями и переходами, инструменты для измерения производительности веб-приложения, тестирование и многое другое. Документация React рекомендует использовать React вместе с Babel, позволяющий применять ES6 и JSX в вашем JavaScript коде. Также имеются полезные инструменты для отладки React приложений, в виде расширений для Chrome и Firefox, с котрыми можно проинспектировать древо React компонентов в инструментах разработчика вашего браузера.

Ресурсы для Обучения:

Angular

Первый Коммит 18-ого Сентября, 2014-ого (согласно GitHub)
Первоначальный Релиз (Согласно Википедии) 20-ого Октября, 2010-ого
Размер Файла: Инструмент Командной Строки. Больше не распространяется, как отдельный JS файл.

Angular разработан командой Google. Так как HTML никогда не задумывался, как динамичный язык, Angular расширяет HTML добавляя набор атрибутов, способных динамически видоизменять разметку. В итоге это позволяет делать декларативное привязывание (“declarative bindings”) к событиям, для отображения динамических данных и состояний основанных на взаимодействии пользователя. Вы можете столкнуться со значительными требованиями к данным при построении моделей данных используя RxJS, Immutable.js или любую другую технологию Push-модель. И вы можете расширить язык шаблонов своими компонентами или использовать широкий выбор существующих компонентов.

“Научитесь создавать приложения на Angular и повторно использовать ваш код и возможности для построения приложений для любых конечных целей. Будь-то веб, мобильный веб, нативный веб или десктопные прилоежния.”

Синтаксис Angular не представляет из себя ничего нового, это всё те же HTML атрибуты, а также Mustache-esque плейсхолдеры, за исключением того, что к атрибуту добавляется пространство имён ng-, всё это можно увидеть в примере ниже:

Angular также построен из компонентов, являющихся комбинацией HTML шаблонов и классов компонентов, которые контролируют часть экрана.

Файл с расширением .ts из примера выше написан на TypeScript. Синтаксис этого языка основан на JavaScript. TypeScript - это синтаксический сахар, который компилируется в JavaScript. Для компиляции вам понадобятся инструменты командной строки.

Ресурсы для Обучения:

Ember

Первый Коммит 30-ого Апреля, 2011-ого
Размер Файла: ?

Ember библиотека, похожая на те, которые мы обсуждали ранее, отлично работает с Handelbars. Для тех кто не знаком с Handelbars это язык шаблонов для построения статических страниц, чем-то похожий на Jekyll. Разработчики могут использовать Handelbars для создания разметки и JavaScript для реализации кастомного поведения для компонентов основанных на взаимодействии пользователя.

“Ember - фреймворк для создания одностраничных JavaScript веб-приложений на стороне клиента, который использует паттерн Модель–Представление–Контроллер (Model-View-Controller MVC)”

Ember создан на Node и используется множество Node.js модулей для работы. Также Ember имеет интерфейс командной строки (его можно установить через npm), предоставляющий общую структуру проекта и набор инструментов для разработки включая систему дополнений. Помимо этого с ним идёт сервер для разработки, а также специальные флаги для среды построения проекта, которые могут быть переданы через командную строку.

В синтаксисе Ember нет ничего необычного, он основан на нотации объектов и литералов, с которой мы уже знакомы в JavaScript, прибавьте сюда Handelbars для шаблонов.

Пример выше простой пример синтаксиса и файловой структуры. Данный код экспортирует и расширит Ember контроллер и скомпилирует имена из объекта в вашу разметку.

Ещё стоит упомянуть возможности роутера Ember, с которым вы по умолчанию получите хорошие ссылки в адресной строке, а также работающие кнопки для возврата на предыдущую страницу, для каждого созданного роута, API довольно легко использовать (для тех кто знаком с серверными веб-фреймворками). Ember.js всегда будет бесплатным фреймворком с открытым исходным кодом, согласно их веб-сайту.

Ресурсы для Обучения:

Заключение

Выбор фреймворка зависит от персональных предпочтений и уверенности в том, что он подойдёт для продолжительной работы над вашим проектом. Если вы хотите глубже узнать и сравнить фреймворки, на сайте Vue есть подробное сравнение, также включающие информацию о других библиотеках, таких как Knockout, Polymer и Riot. Помимо этого вы можете пройти наш тест, созданный для того, чтобы помочь определиться с выбором.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.