css-препроцессоры и js-фреймворки
Пока работал в GeneGo/Thomson Reuters, мы всегда использовали свой код, покуда его проще было править, сторонились открытого кода, да и там всегда мог быть подвох по GPL (используешь свободное ПО - открывай и свой код тоже!). Но на рынке труда уже другие требования и требуется знание различнх фреймворков и препроцессоров.
Вообще, работа ( Read more... )
- фреймворк не должен требовать изучения ещё одного языка,
соответственно быть написанным на JavaScript.
наши решения часто становятся все более сложными нагромождениями решений всех видов проблем
Мы потеряли тот веб, который устаканился, и который мне нравился =) (кстати флэш и сервелат, которые канули в лету, я тоже в своё время откинул)
Прихожу к пониманию, что какие-то фрэймворки дополняют друг-друга и используются в связке, а какие-то предоставляют схожий функционал.
Цитирую
... нет ничего лучше для того, чтобы понять, насколько удобно работать с фреймворком, чем взять и поработать с ни: например, написать с его помощью какое-нибудь несложное приложение. И на основе полученных эмоций в ходе разработки, выбрать понравившийся. Поняно, что с таким зоопарком всех фреймворков не перепробуешь - специально для этого был создан проект TODO MVC, где собраны реализации todo-списка с помощью разных js-фреймворков
Соответственно надо понять какие альтернативные списки существуют.
По TODO MVC я прикинул такие наборы для выбора "элементов" связок фрэймворков:
- MVC: backboneJS/angularJS/knockoutJS/batmanJS (backboneJS проще чем angularJS, поскольку это библиотека, а не фрэймворк)
- TypeScript/ES5 (TypeScript предпочтительней для Angular он включает в себя ES5)
библиотеки:
- requireJS/prototypeJS(устарел как и jQuery)
- nodeJS
А ищо очень полезную ссылку для себя нашёл
Pure.css под BSD-лицензией (ы?)
----
>>> "Fundamentally, though, AngularJS requires you to write invalid HTML."
Incorrect. you may append "data-" to angular directives making them perfectly valid HTML5
Reply
+ui-router. Хорошая связка.
---
Вместо громадного Bootstrap попробовать Pure.css
Reply
эти библиотеки далее используются фрэймворками, например Ember.js
Документация по ES5.1
"Только ReactJS, только хардкор" (долой Angular 2 и Knockout) React 0.14.6 (можно без обвязки NPM [wiki], используется Babel для ES)
ReactJS + Backbone (мучаются)
---
>>> Node.js В отличие от большинства программ JavaScript этот фреймворк исполняется не в браузере клиента, а на стороне сервера.
Статья о CSS-фреймворках и их отличии от библиотек/web-контролов
Reply
Сравнительная табличка 2010.02 про js-фреймворки раскрывающая функциональность.
Хорошие слайды-презентация на тему выбора фреймворка (Flux+React=Reflux.js - Este переписали оставив только конфиг сборщика =))), используют React, Typescript и Lodash).
>>> LazyJS выигрывает у Lo-Dash в производительности
Reply
Reply
- Настоящий :) программист серверную часть, мне нужно будет делать клиентскую. Вопрос в том, что изучать дальше: сейчас я могу только PHP, но для клиентской части это вообще никак.
- возможно Ember или Angular будет для вас правильным вариантом (для SPA), ибо написать неподдерживаемый ужас на backbone/etc и уж темболее на js + jquery намного проще. Так есть хоть шанс что приложение будет структурировано. Хотите рендерить с бэка и использовать JS только для свистулек/анимашек/прочего используйте jQuery, но имейте ввиду, что при больших объёмах jQuery ваш клиентский код пре
---
Если ещё UI выбирать, то, например принцип Material Design от Гугла
если юзать AngularJS, то смотрим на LUMX но там SASS, Angular старый (уже плохо), velocity и momentjs
MUI (без внешних зависимостей - не требует других фреймворков)
Materialize (на jQuery и SASS)
Material Framework (контролы можно подключать не все подряд, а только те что нужны) - очень привлекательно.
MDL (Material Design Light) БЭМ, Vanilla (native js), есть исходные CSS для SASS, но нельзя выключить из кода контролы которые не нужны - нужно сызнова делать сборку
Что привлекает:
>>> If you’re interested in a Material Design experience using vanilla Web technologies like CSS, JavaScript and HTML, MDL might be a useful option to consider.
>>> MDL was developed in close collaboration with the Material Design and Chrome UX teams and undergoes regular reviews for spec compliance.
Leaf CSS framework (использует Stylus)
Bootstrap Material (jQuery 1.9.1, Bootstrap 3.0)
Google Polymer (самописные html-тэги)
---
По материалу с конференции Яндекс
Фрэймворки (не брать комбайны в которых есть всё? собирать самому что нужно)
Core Lvl (абстракция API браузера для доступа к DOM): jQuery, YUI, Dojo, ExtJS
UI (Widget toolkit): jQuery UI, YUI, Dojo (от Гугл), ExtJS
High lvl (паттерн программирования, сборщики) БЭМ, MVC, OOP
App lvl: логика приложение которое пишем мы
Mobile Frameworks!!! (что-то типа как раньше делали отдельные страницы для печати и WAP. Нынче ведь можно использовать принцип Adaptive): EmbedJS, jQuery Mobile, Sencha Touch, xui.js
OOP/MVC: Amber, Backbone, Ember, Knockout
Модульность и загрузка: AMD/LMD, LabJS, RequireJS
Юнит-тестирование: Jasmine, Mocha, Sinon, QUnit
GWT vs Angular
Трансляторы и компиляторы: GWT (Java -> JavaScript), TypeSript от Microsoft (ES5 -> Javascript)
Отсюда понял, что мне пока не нужен GWT, ES5 и CoffeeScript =)
Полифиллы - код реализующий функциональность которую вы ожидаете увидеть нативно реализованное в браузере (отсутствие поддержки HTML5 привело к созданию полифиллов)
То, что сейчас кажется слишком громоздким для вашего проекта,
через какое-то время может оказаться в самый раз.
Очень важна популярность проекта (чтобы получить поддержку по багам/непоняткам).
Менять фрэймворк довольно дорого - вот!!!
Dojo Toolkit (Less, Dijit UI, dgrid от SitePen)
>>> dojo представляет лишь археологический интерес.
Reply
LESS, jQuery:core, normalize.css (а не reset.css)
Node.js или Python на сервере
Material Design CSS: normalize.css -> MUI CSS / Boilerplate 5.3.0 / Twitter Bootstrap Material (Bootstrap сразу с jQuery и контролами и кучей js)
На Boilerplate можно навесить YUI/jQuery UI, на Bootstrap же не имеет смысла этого делать, поскольку для UI у него своё CSS/JS решение есть: Bootstrap Material. Bootstrap для готового быстрого решения - можно сказать сайтов на продажу, Boilerplate интересно попилить, поскольку это просто набор практик, которые можно себе надёргать.
---
Не забывать указывать
meta name="viewport" content="width=device-width, initial-scale=1"
---
normalize.css -> Pure.css (для динамики YUI.js от Yahoo - смысла нет если хотим Material Design, тогда уж больше смысла в jQuery UI)
статья на Хабре: Backbone/Angular/Ember/CanJS
Backbone.js + plugins
или
Ember.js высокий порог входа, но все толковые программисты, кто долго использовал, довольны
Reply
>>> However, it is not the best idea to use Bootstrap if the website has a complex design, non-standard components or complex combinations of such components (for instance, if there are A/B tests using a number of alternative component designs and page layouts). This is because Bootstrap was not made to extend.
Reply
Reply
Leave a comment