пятница, 20 января 2017 г.

Two Way Binding, зачем мне это, когда есть jQuery?

Давайте поговорим про Two Way Binding, что это за херня ваще?
Вот представим, что вы знаете основы JS и в основном используете jQuery. Все же ок, вас все устраивает. А теперь представим случай, когда кнопок, инпутов, переключалок и фильтров на вашей странице так много, что становится тяжело все это отслеживать. Теперь с конкретными примерами.

Весь код, что вы увидите ниже, просто для примера, он нерабочий и может содержать незначительные ошибки.

Рабочий прототип с jQuery можете скачать вот тут
https://jsfiddle.net/philsitumorang/9axr7w59/

А этот же пример с angularjs вот тут
https://jsfiddle.net/philsitumorang/rbk83hgd/

Вот у нас есть список пользователей, который пришел к нам с сервера в формате JSON.
Мы хотим вывести его с помощью jQuery где-то в нашем <body>
Выглядеть это будет примерно так:

Какие же проблемы нас ждут дальше. Главная проблема это интерактивность в нашем проекте. Теперь нужно навешивать на определенные классы события, типа click, чтобы что-то менялось.
Давайте будем нажимать на кнопку с классом .set-status чтобы менялся текст и его реальное значение в кнопке



// Почему через .on()? Потому что этот ивент у нас валяется просто где-то в $(document).ready и мы хотим, чтобы событие срабатывало тогда, как jQuery увидит элемент с классом .set-status
Вот примерно такое кол-во кода надо написать, чтобы поменять текст внутри div, при клике в зависимости от статуса пользователя. Также нужно было бы добавить ajax запрос, чтобы послать на сервер изменение статуса пользователя, а можно это все собрать в одну кучу и отправить одним запросом (тут все зависит "От"), в любом случае это дополнительное действие, нужно либо обходить снова элементы пользователей в html или работать отдельно с массивом, который мы перешлем. Короче, нет синхронности между данными и тем, что мы видим на экране, мы ее как бы эмулируем руками.

В данном случае если где-то что-то меняется и это нужно отобразить, мы должны лезть в html через jQuery и менять значения вручную и если что-то поменялось в массиве или объекте с данными о пользователе, это автоматически не поменяется во view (в html)

Мы начинаем понимать, что подобных кнопок и переключателей будет на сайте дохера и если есть смежный ф-ционал, тот который при клике на одну кнопку, меняет значение в шапке и контенте. Сразу пример: Мы находимся на странице профиля и решили сменить имя пользователя, которое отображается в центре страницы, а еще в шапке справа, вот с jQuery необходимо будет сменить имя и в шапке и по центру. Это не самый страшный пример при котором нужно обновлять данные в разных углах и окнах страницы.

Если наступила вот такая вот боль, особенно когда ф-ционал меняется, когда верстка меняется, вы можете потерять те классы к котором вы привязывались в jQuery, значит пора переходить на что-то более серьезное, чем jQuery и Vanila JS. (С опытом вы будете сразу понимать и анализировать то, какой фреймворк вам подойдет в проекте)

Один из самых распиаренных и популярных фреймворков для таких целей был AngularJS он до сих пор очень популярен и работает хорошо! Принцип примерно такой (возьмем тот же пример с пользователями):

// исходник с контроллером user-controller.js
// и наш шаблон user-template.html

После того как мы все настроили в шаблоне, мы больше вообще не переживаем за связь между html и нашим js кодом. Как только мы получим в $scope.users массив с данными он тут же автоматически отобразится в шаблоне, а если мы решим удалить одного из пользователей мы сразу же увидим это на экране. Если решим что-то переверстать, то просто будем выводить эти данные в другом месте, теперь мы точно знаем и видим разницу между данными и версткой.

Добавим еще обработчик click в наш исходник

По этому принципу работают и другие современные фреймворки, просто у них другая реализация внутри, для тех кто не хочет вникать в кишки разницы нет кроме удобства использования подобных инструментов. Кому-то удобно это все делать с помощью ReactJS или VUE, а кто-то возможно работает с KnockoutJS и не хочет вникать в эти "уникальные" и "непохожие" друг на друга фреймворки.

В данный момент froncubator.com использует angularjs (1-й версии), сложные по структуре проекты мы делаем на нем же. Если нам нужны небольшие интерфейсные элементы используем vueJS.

froncubator.com курсы для frontend разработчиков
https://vk.com/froncubator наша группа в vk

1 комментарий: