Javascript фреймворки. Что это? Зачем? Почему? Зачем нужны js фреймворки
В данном уроке разберём зачем вообще нужны JS фреймворки. Предположим нам нужно создать SPA (Single Page Application), это такое веб приложение которое состоит из одной страницы, а всё остальное делается средствами . Такие приложения характерны тем что они очень динамичны и работают на много быстрее чем статические сайты.
Для написания такого приложения существует несколько подходов:
- Писать на нативном JS.
То есть без использования сторонних библиотек. Данных подход не разберём так как это очень тратит Ваши ресурсы, и в большинстве случаем в пустую. - Используя библиотеки.
В данном уроке для примера рассмотрим jQuery. - Писать на фреймворке.
И данный способ тоже рассмотрим.
Создание приложения на jQuery
Плюсы
- Быстрый старт.
То есть, чтобы начать писать не нужно никакие настройки делать. Просто нужно подключать библиотеку – это быстро. - Не нужно ничего изучать.
Многие знакомы с данной библиотекой.
Минусы
- Медленная библиотека.
jQuery работает в десятки раз медленнее чем любой JavaScript фреймворк, или нативный JS. - Нет структуры.
У данного подхода нет определенной структуры. То есть jQuery это просто библиотека которая основана на селекторах и не несёт в себе какого-то паттерна программирования. В ней мы просто пишем код и всё. - Сложная поддержка кода.
Данный пункт это последствие предыдущего пункта. Если нет структуры сложно разобраться где и что лежит, по этому поддерживать такой код – трудно (и это уже знаю по личному опыту). - Плохая расширяемость.
Когда приложение вырастит до больших объёмах, очень сложно будет добавить новый функционал так как не понятно будет что и где находиться. То есть для маленьких приложений это не очень актуально, однако для серьёзные приложения это будет сольдный минус.
Создание приложения на фреймворке
Плюсы
- Структурированный код, паттерны.
Любой фреймворк несёт в себе какой-то паттерн программирования. Из за этого у него очень структурированный код. Например Backbone.js несёт в себе паттерн MVC, или например AngularJS несёт в себе паттерн MVVM. Это сильно упрощает дальнейшую разработку приложения. - Много нужных инструментов идёт уже “в коробке”.
Например какие-то инструменты для роутинга или для шаблонизаций. - Высокая производительность.
Любой фреймворк в десятки раз быстрее чем jQuery. Опять-же на маленьких проектах это может быть не очень актуально, однако для больших это очень заметно. То есть приложения на jQuery могут начать тормозить потому что операций с DOM-ом очень затратны. - Лёгкая расширяемость и поддержка кода.
Из за того что код структурированный и всё находиться в своём модуле (модель, роутинг), очень легко добавить новый функционал. - Быстрая разработка.
В начальном этапе придёться настроить как-то фреймворк. Однако в последствие можно будет просто пользоваться уже тем что всё структурировано и повыситься скорость разработки.
Минусы
- Изучение фреймворка.
То есть в некоторых фреймворках есть собственный синтаксис, как например в или Angular.js. У каждого фреймворка есть своя “особенная” идеология (за счёт этого и можно реализовать интересные вещи).
Итог:
Для маленьких приложения не очень целесообразно какой либо большой фреймворк.
Однако для SPA нужно использовать фреймворк.
JS-framework’и — это инструменты для построения динамических веб/мобильных/настольных приложений на языке Javascript. Как и к любым другим инструментам,
разработчики прибегают к использованию js-фреймворков там, где невозможно/очень сложно/очень долго выполнять задачу обычными средствами. В подавляющем большинстве случаев, фреймворки используются для написания, так называемых, Single Page Applications. Т.е. все, что проиходит на сайте, проиходит на одной страничке, без прямого перехода с нее.
С их помощью можно разрабатывать как полноценные сайты, так и функциональные модули (различные онлайн-инструменты). Конечно, полноценные фреймворки лучше подходят для первой задачи, а для второй рекомендуется использовать более легковесные фреймворки или библиотеки.
Давайте сначала немного поговорим именно о фреймворках. Они предоставляют четкую структуру приложения и реализуются с использованием так называемых «паттернов проектирования» (понятие перекочевавшее больше из бекенда, но явно имеющее место во фронтенд разработке с использованием js-фреймворков). Наиболее широко рапространены следующие паттерны: MVC (Model-View-Controller), MVP (Model-View-Presenter) и MVVM (Model-View-ViewModel). В интернете имеется огромное количество информации, подробно описывающее каждый из них, и раскрытие этой темы не является основной задачей статьи, потому кому будет интересно — может самостоятельно ознакомиться с этими понятиями.
Преимущества построения приложения на JS-фреймворке:
- можно легко реализовать SPA (Single Page Application);
- использование js-фреймворка обязывает нас иметь структуру приложения (скажем решительное «нет» спагетти-коду);
- кода становится заметно меньше и он чище, что позитивно отражается на скорости разработки, а также поддержке и устранении ошибок в коде приложения;
- наличие структуры подразумевает модульность приложения, а это дает возможность проще работать над приложением нескольким разработчикам одновременно;
- следующее преимущество больше вытекает из использования самого javascript, но значительно усиливается при использовании фреймворка: возможность быстро создать мобильное и/или настольное кроссплатформенное приложение из веб-версии с помощию систем типа PhoneGap или Apache Cordova.
Из существенных недостатков можно выделить только временно неполную поддержку поисковыми системами, но эта задача редко совпадает с задачей по реализации SPA (Single Page Application), тем более, что ведущие поисковые системы (как минимум, Google), уже практически полностью решили эту проблему.
Приложений на js-фреймворках уже выпущенно очень много и этот сегмент только набирает темп. Под примеры выполненных проектов на Angular.js, например, выделен целый сайт builtwith.angularjs.org , списки сайтов и приложений, использующих другие фреймворки можно найти внизу на главных страницах официальных сайтов: backbone.js , ember.js .
Javascript библиотеки
Напоследок немного слов об упомянутых выше js-библиотеках. Самые распространенные — jQuery, mootools, knockout, polymer, reactjs. Они сильно упрощают процесс написания не сложных отдельных функциональных модулей, реализуемых на javascript, но не являются и никогда не будут js-фреймворками. Да, они отлично вписываются в уже готовый сайт, и да, их используют те же js-фреймворки для работы с DOM’ом (например, Ember.js). Но на этом их функциональности и полезности заканчиваются: они не подходят для полноценной реализации одностраничных приложений.
Алины Архиповой “JavaScript Frameworks: How To Make Your Choice”.
JavaScript это одна из базовых технологий во всемирной паутине. Как следует из результатов опроса , JavaScript является топовым языком среди фронтенд-разработчиков, и не похоже, чтобы он терял популярность. Вот почему сегодня существует так много фреймворков JavaScript, что сложно понять, какой из них самый эффективный.
Чем больше появляется фреймворков, тем больше вокруг них споров. В сообществе разработчиков много говорится о том, какие фреймворки наиболее эффективны для фронтенд-разработки. Основываясь на нашем исследовании, мы определили пятерку самых обсуждаемых фреймворков JavaScript. Их мы и описали в этой статье. Также в ней мы поделимся опытом Yalantis: расскажем о том, какие фреймворки предпочитают наши фронтенд-разработчики.
Обзор популярных фреймворков JavaScript
Каждый месяц выходит новый JavaScript-фреймворк. У собственников продуктов могут возникнуть сложности с выбором. Фреймворки это необходимые . Их задача состоит в ускорении и облегчении рабочего процесса, а также в повышении его продуктивности. Поэтому выбор фреймворка сильно влияет на эффективность и производительность процесса разработки. Давайте сравним топовые фреймворки JavaScript.
Angular
Angular это полнофункциональный фреймворк, выпущенный в 2010 году Google. Компания продолжает регулярный выпуск обновлений. Например, в марте 2018 последняя версия, Angular 6, принесла много улучшений, включая новый движок рендеринга для более быстрых и меньших по размеру приложений.
Сегодня Angular это один из самых популярных фронтенд-фреймворков. Многие разработчики выбирают Angular, поскольку рассматривают его как ключ к упрощению разработки. Благодаря его шаблонам специалисты по фронтенду могут с легкостью использовать Angular для создания динамических одностраничных веб-приложений со множеством изменяемых данных. Кроме того, в Angular есть Model-View-Controller (MVC, «Модель-Представление-Контроллер»), делающий тестирование более простым и доступным.
React.js
React.js это фреймворк, выпущенный командой Facebook в 2013 году. Крупные компании, включая Dropbox, PayPal, BBC, Atlassian и Instagram используют React в качестве основного инструмента фронтенда.
React прекрасно подходит для приложений и сайтов со сложной логикой представления. React также позволяет повторное использование компонентов в рамках приложения, благодаря чему разработчикам не приходится снова и снова создавать похожие компоненты. С помощью React разработчики могут фокусироваться на создании сложного функционала. Благодаря специальному алгоритму согласования под названием Virtual DOM, фронтенд-разработчики получают значительное увеличение производительности. Они могут разрабатывать быстрее, поскольку им не нужно обновлять представления после каждого небольшого изменения.
Vue.js
Vue.js это довольно новый фреймворк JavaScript, созданный Эваном Ю. Его главная цель – сделать разработку пользовательского интерфейса более организованной.
Многие специалисты по фронтенду утверждают, что это превосходный инструмент для новичков. Он очень прост для понимания, поскольку фокусируется на слоях представления. Vue.js работает без Babel – транспилятора, конвертирующего код JavaScript в старую версию ES5, которая запускается во всех браузерах. Отказ от использования Babel ускоряет разработку. Шаблоны Vue.js это валидный HTML, поэтому интеграция проходит легко. Этот фреймворк является хорошим решением для разработки легковесных приложений.
Ember.js
Фреймворк Ember.js был создан в 2011 году. Он был использован при создании сайтов многих хорошо известных компаний, включая Kickstarter, Heroku и LinkedIn.
Ember.js регулярно обновляется и обеспечивает полный пакет функций. Этот фреймворк эффективен для разработки сложных веб-приложений, а его система шаблонов, основанная на строках, способствует ускорению загрузки. Ember.js сконцентрирован на масштабируемости, поэтому разработчики могут с легкостью работать как с мобильными, так и с веб-проектами.
Next.js
Next.js это необычный JavaScript-фреймворк. Он был разработан командой React в качестве дополнительного инструмента для рендеринга на стороне сервера. При работе с React и Next.js процесс разработки становится проще, как при использовании Vue.js.
Next.js имеет такие достойные упоминания особенности как автоматическое разделение кода и маршрутизация на основе страницы на стороне клиента. Кроме того, Next.js имеет полную поддержку CSS (под названием styled-jsx) для значительного облегчения стилизации интерфейса пользователя.
У этих пяти популярных библиотек и фреймворков JavaScript есть много общего. Например, все они имеют эффективную компонентную архитектуру и систему документации. Обеспечиваемый ими функционал нацелен на уменьшение времени разработки, что выгодно как собственникам продукта, так и разработчикам.
Выбор лучшего фреймворка для построения UI всегда должен зависеть от спецификации проекта, а также от навыков разработчика. Сейчас мы расскажем, что выбирают разработчики в Yalantis.
Какие фреймворки выбирают фронтенд-разработчики Yalantis
Команда по фронтенд-разработке в Yalantis часто работает с JavaScript-фреймворками. За последние несколько лет мы испытали разнообразные фреймворки, чтобы найти наиболее эффективный и выгодный инструмент.
Сегодня мы предпочитаем работать с двумя хорошо известными фреймворками JavaScript – Angular и React. Но почему именно с этими двумя? Давайте рассмотрим подробнее функционал, который они предлагают фронтенд-разработчикам.
Angular
Команда Google разработала один из наиболее востребованных на сегодняшний день фреймворков JavaScript. Angular приобрел заметную популярность благодаря поддержке двустороннего связывания данных, эффективным шаблонам и простой документации.
Эффективная система, основанная на компонентах. Компоненты и директивы заменили контроллеры и области применения в качестве основных блоков приложений. Классы компонентов это отдельные блоки, что делает их многоразовыми и легко добавляемыми в существующие приложения.
Двустороннее связывание данных. Эта особенность уменьшает количество времени, необходимого для написания кода. Разработчики могут вносить изменения в модели и представления одновременно, без ожидания, пока произойдет рендеринг UI-элементов.
TypeScript. Обучающие ресурсы и документация по Angular основаны на TypeScript, поэтому его трудно избежать. TypeScript некоторым разработчикам может показаться сложным, но ничего плохого в нем нет. Многие новые фичи становятся гораздо быстрее доступны для TypeScript, чем для других языков. Больше того, TypeScript обеспечивает шаблоны объектно-ориентированного программирования и опциональную статическую проверку типов, что полезно для больших приложений.
Удобные шаблоны. Шаблоны в Angular представлены в HTML, так что разработчики могут создавать функциональные приложения даже если они не слишком хорошо знают JavaScript. Браузер обрабатывает шаблоны и генерирует инструкции рендеринга, также известные как директивы.
Простая документация. Вся официальная документация по Angular короткая и простая, поэтому даже не слишком опытные разработчики могут быстро освоить основы.
Поддержка сильного сообщества. Фреймворк Angular это продукт Google, поэтому естественно, что у него много поклонников и людей, которые его поддерживают. Разработчики могут с легкостью найти множество советов в блогах и на форумах.
Подобьем итоги. Фреймворк Angular это топовый инструмент для фронтенд-разработки, предоставляющий много разных функций. Создание приложений с помощью Angular выгодно и бизнесу, и разработчикам. Прежде всего, Angular поддерживается Google, так что этот фреймворк регулярно обновляется, а его функционал постоянно совершенствуется. Во-вторых, в отличие от многих других фреймворков, Angular доступен под лицензией MIT. Для бизнеса и разработчиков важно использовать лицензированные инструменты, поскольку они более надежны.
React
React это революционный JavaScript-фреймворк, который занимает лидирующие позиции в рейтингах фреймворков JavaScript. Он очень популярен среди пользователей GitHub, которые дали ему больше 95 тысяч звезд. Но что делает React таким особенным?
Повышенная производительность. В React есть уникальная особенность под названием Virtual DOM, которая повышает эффективность написания кода. Когда разработчики делают небольшие изменения, им не нужно обновлять представление полностью. Изменения проходят через Virtual DOM, который делает повторный рендеринг только нужной части страницы. Такой подход занимает меньше времени и сохраняет силы разработчиков.
JSX. Декларативный синтаксис JavaScript, который помогает создавать аккуратный и читаемый код. JSX также помогает комбинировать компоненты в один исполняемый файл.
Легкость изучения. Если разработчики знают JavaScript, они могут сразу приступать к использованию React. Разработчики могут пропустить мануалы, поскольку React прост и хорошо организован. Чтобы стать специалистом по React, вам нужно будет познакомиться с JSX.
Компоненты, которые можно использовать повторно. React, как и Angular, имеет основанную на компонентах архитектуру. Это означает, что при использовании фреймворка React разработчики могут рассматривать компоненты как строительные блоки для приложения. Самое большое преимущество этого в том, что готовые компоненты могут быть использованы в различных частях приложения. Это повышает скорость разработки.
Поддержка Facebook и сообщества. React курируется одним их технологических гигантов – Facebook. Команда Facebook знает, как работать со сложными веб-приложениями, поэтому фреймворк React ориентирован на увеличении производительности. Сообщество React одно из самых больших (если сравнивать с сообществами других популярных фреймворков для фронтенд-разработки). Есть много блогов, плагинов и SDK, имеющих отношение к React. Поэтому, если у разработчика возникнут какие-либо проблемы с этим фреймворком, он может с легкостью найти ответы в интернете.
В общем, фреймворк React это эффективный инструмент для разработки интерфейса пользователя. Его функционал улучшает разработку путем снижения времени, нужного для написания кода, а это большое преимущество для бизнеса и разработчиков. Кроме того, React легок в изучении, так что разработчики могут начинать использовать его без предварительной подготовки. Наконец, у него есть отличная поддержка сообщества и Facebook, поэтому у этого фреймворка точно будут обновления и новые интересные функции.
Мы описали пять топовых фреймворков JavaScript, но выбор за вами. При принятии решения сравнивайте производительность, архитектуру, кривую обучения, документацию, организацию и поддержку сообщества.
Назначение
Когда JavaScript только появился, он использовался преимущественно для создания довольно простых эффектов. В последние годы ситуация вокруг JavaScript существенно изменилась: с приходом эры Web 2.0 и AJAX этот скриптовый язык стал тем техническим базисом, на котором строится динамическая и интерактивная часть большинства мировых сайтов. Для упрощения и ускорения разработки подобных больших сайтов стали массово появляться целые платформы на JavaScript, которые представляли собой уже готовые библиотеки с набором стандартных возможностей.
Популярность
Для обзора основных из них попробуем выделить самые известные и распространенные JS-фреймворки. Поскольку вопрос выбора “лучшего” в этой сфере - предмет множественных и ожесточенных споров, мы будем опираться лишь только на цифры и факты.
Итак, выберем 6 ведущих фреймворков по сумме 4 критериев:
Все результаты тестирования и опросов по этим критериям приведены ниже в виде диаграмм.
Просто в качестве ремарки к этим результатам добавим, что самые последние и подробные статистические данные по JS-фреймворкам можно найти на этой страничке , а производительность последних версий ведущих фреймворков в режиме реального времени всегда можно измерить и наглядно сравнить или .
Обзор лучших
jQuery
Размер: 155Kb (миним.версия - 72Kb), лицензия: MIT и GNU GPL,
последняя версия: 1.6 (3 мая 2011)
jQuery - самая популярная и распространенная библиотека на JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Также jQuery предоставляет удобный API по работе с AJAX. Данный фреймворк один из первых удачно реализовал принцип ненавязчивого JavaScript . Другой секрет популярности этой библиотеки - это реализация очень выдержанного баланса между хорошей функциональностью и при этом удачной попыткой создания достаточно компактного универсального ядра. Если дополнить сюда компромиссную возможность очень просто расширять функциональность базовой библиотеки за счет включения дополнительных плагинов (количество которых сейчас перешло уже за 1000), то на выходе мы получаем по-настоящему очень универсальный, гибкий и быстрый продукт.
Для желающих получить более продвинутые UI-эффекты такие, как масштабирование, сортировка, поддержка drag and drop, и стандартные виджеты, такие как закладки, слайдер, прогрессбар и т.д., рекомендуется использовать родственную библиотеку jQuery UI , которая специализируется именно на графических эффектах и созданию сложного пользовательского интерфейса.
В целом jQuery очень выгоден для малых и средних проектов, но при разработке крупных проектов может быть проблематичен, так как приводит к дефициту проектирования, хотя весьма производителен благодаря простому содержанию и коду.
Digg , BBC , Dell , IsoHunt , Break.com , TinyPic , eMusic , Box.net
Prototype JS
Размер: 278Kb (миним.версия - 56Kb), лицензия: MIT, последняя версия: 1.7 (22 ноября 2010)
Второй по популярности JS-фреймворк, который существенно упрощает работу с AJAX и некоторыми другими продвинутыми JS-возможностями. Несмотря на его доступность в виде отдельной библиотеки, он чаще всего используется программистами вместе с Ruby on Rails, Tapestry, script.aculo.us и Rico. Часто его популярность пытаются объяснить именно близкой интеграцией с распространенным Ruby on Rails (хотя уже рассмотренный jQuery на уровне плагинов также может взаимодействовать со многими популярными платформами, например, с тем же Ruby on Rails или PHP).
С точки зрения проектирования фреймворк очень удобен для средних проектов, так как предоставляет элементарный способ эмулирования классического ООП в добавление к своим простым функциям. Производительность у него несколько нестабильна, т.е. на некоторых операциях он может быть быстрым, на других - производительность заметно падает. Prototype один из немногих фреймворков, который не включает в себя UI-компоненты или UX-улучшения: для использования подобных эффектов рекомендуется использовать его дочернюю библиотеку - script.aculo.us (или Scripty2), которая добавляет огромное количество графических эффектов, поддержку drag-and-drop, слайдеры, AJAX-редакторы и т.д.
Примеры известных сайтов на базе этого фреймворка: CNN , The New York Times , Apple , Fox News Channel , Last.fm , Twitter , Hakia .
Mootools
Размер: 101Kb (миним.версия - 60Kb), лицензия: MIT,
последняя версия: 1.3 (11 октября 2011)
MooTools является модульным, объектно-ориентированным фреймворком. Он очень похож в своем подходе к дизайну ядра на jQuery и Prototype - он не включает в себя UI-контролы и виджеты, ограничиваясь минимальным набором эффектов и возможностей. Но, несмотря на такой здоровый минимализм, этот фреймворк содержит очень интересный плагин MooTools.More.js, который на самом деле несколько больше чем просто плагин: он позволяет очень сильно наращивать возможности сторонними библиотеками, и имеет при этом очень интересные дополнения для манипуляций с массивами, датами, хэшеми, строками и т.д. Нас очень впечатлила возможность локализовать англоязычный синтаксис языка самого mootools на любой национальный язык, что позволяет программировать на нем максимально комфортно, например, на русском языке.
Примеры известных сайтов на базе этого фреймворка: MooTools используется в CMS Joomla, поэтому таких сайтов чрезвычайно много.
YUI
Размер: 31Kb, лицензия: BSD,
последняя версия: 3.3.0 (1 декабря 2010)
Библиотека Yahoo! UI Library (YUI) - это набор утилит и контролов, написанных на JavaScript и CSS, для создания интерактивных web-приложений, использующих техники DOM-скриптинга, DHTML и AJAX. В этом фреймворке доступны два типа компонентов: утилиты и контролы. Утилиты упрощают браузерную разработку, связанную с DOM, DHTML и AJAX. Контролы - это набор уже готовых, высокоинтерактивных визуальных элементов для проектирования веб-страниц. Все эти элементы создаются и работают только на клиентской стороне и не требуют обновление страницы для их изменения. Вся библиотека распространяется под BSD-лицензией и бесплатна для всех пользователей. YUI создана совместными усилиями ведущих инженеров Yahoo, а также разработчиками со всего мира. Сейчас это один из ведущих JS-фреймворков, полностью готовый для промышленного использования, где очень продвинутые UI- и UX-составляющие интегрированы в одно целое в рамках одной поставки, образуя полностью завершенный, независимый и универсальный продукт. Если к этому добавить её очень либеральную лицензию, то понятна та популярность, которую справедливо получила эта библиотека, особенно в коммерческих разработках и многочисленных форках, где она была взята за основу.
Примеры известных сайтов на базе этого фреймворка: Yahoo! Shopping , Bebo , ImageShack , LinkedIn , Walmart.com .
Ext JS
Размер: 502Kb (миним.версия - 84Kb), лицензия: GPLv3 и коммерческая,
последняя версия: 4.0 (26 апреля 2011)
Проект начинался как попытка расширить вышерассмотренный фреймворк Yahoo! User Interface, но на данном этапе - это уже полностью самобытный, практически никак не связанный с YUI проект. Движущей силой, основателем и бессменным лидером проекта остается Джэк Слоцум - известный специалист в среде JavaScript-программистов.
ExtJS - это не самый производительный из существующих фреймворков, а его главная отличительная черта в том, что он предоставляет собой наиболее приближенную среду к классическому программированию, реализуя очень развитые графические средства отображения и взаимодействия с пользователем в среде Web 2.0. Начиная с версии Ext JS 3.0 библиотека логически разбивается на две части: Ext Core (набор JavaScript-функций, позволяющий создавать динамические веб-страницы с унификацией обработки в различных браузерах и распространяемый по MIT-лицензии) и Ext JS (набор виджетов для создания пользовательских интерфейсов с двойным лицензированием по GPL v3 или по коммерческой лицензии).
Более подробно о последней, четвертой версии этого фреймворка мы недавно .
Dojo
Размер: 123Kb (миним.версия - 65Kb), лицензия: BSD и AFL,
последняя версия: 1.6.0 (15 Марта 2011)
Ещё один пример из списка популярных фреймворков, который, кроме того, что во многом повторяет плюсы своих аналогов, имеет и свои особенности. Среди самых важных хотелось бы упомянуть очень серьёзную попытку добиться полной независимости от каждого конкретного JS-интерпретатора, для чего разработчиками проводится просто титаническая работа по тестированию и поиску максимально универсальных и простых решений. Поэтому, как следствие, сфера применения этого фреймворка максимально широка: это не только обычные решения на стороне клиента, но также и на стороне сервера и десктопных компьютеров, - везде, где имеется возможность запуска JavaScript. Вторая важная техническая особенность Dojo - это поддержка дизайна множественности точек входа (Multiple Points Of Entry), что дает ему множество очевидных технических преимуществ. Также хочется упомянуть Dojo Extensions for Adobe AIR , призванный помочь разработчикам применять весь потенциал платформы AIR в приложениях с использованием Dojo Toolkit.
Примеры известных сайтов на базе этого фреймворка: Dogo Toolkit используется в Zend Framework, поэтому таких сайтов чрезвычайно много.
Заключение
JS-фреймворки переживают сегодня очень бурное развитие, например, ещё вчера очень популярный base2 , сегодня уже во многом ушел в тень: буквально каждый месяц появляются все новые перспективные новички и всё более интересные разработки в этой области.
_____
Надеемся, что наша подборка JavaScript-фреймворков поможет вам при создании сайтов , независимо от того, на каком движке вы их разрабатываете.
JavaScript фреймворки подобны смерти и налогам - неминуемы и неизбежны. Я уверен, что если бы мог подслушать всех, кто начинает веб-проект, каждый раз первый вопрос был бы о том, какой JavaScript фреймворк в нем будет использоваться. Вот насколько укоренилась роль фреймворков в нашей отрасли. Это не так, как должно быть, пора остановиться.
Давайте оглянемся назад и постараемся понять, как мы к этому пришли.
Angular и Backbone и Ember, о боже
HTML Imports, HTML шаблоны, настраиваемые элементы и Shadow DOM - все эти технологии расширяют наши возможности. Они должны позволить нам разорвать связь с фреймворками, позволяя создавать пригодные для повторного использования элементы и функционал. Для наглядного представления смотрите эти статьи и библиотеки:
Хорошо, если бы у нас была одна огромная библиотека полифиллов HTML5, но ещё лучше было бы то, что я назвал бы «html-5-polyfill-o-matic», набор инструментов, который позволил бы мне использовать Веб-компоненты минуя трясину HTML+JS, а затем анализировал мой код, или статическим анализом, или через Object.observe при работе, и выдал бы мне из всего полифилла HTML5 только то, что нужно для моего проекта.
Этот вид функциональности ещё более важен, потому что я начал пытаться
совместить веб-компоненты и библиотеки из нескольких источников, т.е.
Если я начну создавать собственные элементы, мне нужно будет создавать и свой собственный пакет? Я не думаю, что это масштабируемая идея, я считаю, что нам нужны идиомы и инструменты, которые справлялись бы с этим гораздо лучше. Это на самом деле может означать изменение того, как пишется открытый код. «Виджет» не проект, поэтому наша работа с этими вещами должна изменится. Конечно, продолжайте хранить код в Git, но нужны ли вам накладные расходы в виде GitHub? Что-то более легковесное, ближе к Gist, чем к проекту, подошло бы лучше. А как минимизировать/вулканизировать весь этот код в подходящий для использования в моем проекте вид? Что-то вроде Asset Graph может стать хорошим началом.
И так, что нам теперь нужно?
- Идиомы и принципы построения повторно используемых компонентов.
- Инструменты, которые работают в рамках этих идиом, для компиляции, сжатия, и т.п. HTML, CSS, и JS.
- Масштабируемый полифилл HTML5, полностью или частично построенный на основе тех, которые сейчас реально используются.
Это то, что нам требуется для того, что бы построить будущее, в котором нам не придётся знать последнюю модель новейшего фреймворка, вместо этого мы просто будем работать напрямую с платформой, загружая элементы и библиотеки для своих нужд, и тратя своё время на написание приложений, а не на картографирование айсбергов.
Вопросы и ответы
О: Я не ненавижу их. Некоторые из моих лучших друзей - авторы фрейворков. Признаюсь, я немного вдохновлялся ироничной статьёй «ты погубил JavaScript », но я ни в коем случае не высмеиваю авторов фреймворков.
В: Вы не можете сделать ____ на HTML5, для этого вам нужен фреймворк.
О: Во-первых, это не вопрос. Во-вторых, спасибо что указали на это. А теперь давайте работать вместе, чтобы добавить в HTML5 возможность делать ____ без фреймворка.
В: Но ____ не фреймворк, это библиотека!
О: Да, как я уже сказал, есть градиент от gist до фреймворка, и вы можете видеть всё немного иначе, чем я. Это нормально, я не про классификацию какой-либо конкретной части программного обеспечения, речь идет об отдалению от фреймворков.
В: Я делал это годами с помощью ____ и ____ и ____.
О: Опять же, это не вопрос, но всё равно, это хорошо, вы должны быть в хорошей форме, чтобы помочь всем остальным.
В: Таким образом, каждый должен переписать выпадающие меню, вкладки, ползунки и переключатели сам?
О: Абсолютно нет, дело в том, что должен быть способ, чтобы создать те элементы таким образом, чтобы не требовалось установки фреймворка.
В: Чувак, все эти HTML Imports скажутся на производительности сайтов
О: Если вы используете все это бездумно, то да. Вот, почему я указывал на необходимость инструментов, компилирующих и сжимающих HTML, CSS, и JS.
В: Так что я не должен использовать никакие библиотеки?
О: Нет, это не то, что я сказал. Я был очень осторожен с разграничением библиотек и фреймворков. Библиотека обеспечивает ортогональный кусок функциональности, которая может быть использована с другими библиотеками. Библиотеки - это хорошо. А вот фреймворки требуют 100% того, от чего, по моему мнению, стоит отказаться.
В: Но мне нравится связывание данных!
О: Много кому нравится, я только высказываю личные предпочтения. Я не говорю, что вы не должны использовать связывание данных, только то, что вам не нужно прикручивать весь фреймворк, чтобы получить привязку данных, для этого есть автономные библиотеки.
Оригинальная статья: No more JS frameworks Статью вычитывали: