kmp news

      

Инструментарий JavaScript

 

 

 

"Гадкий утенок" ставший "Прекрасным лебедем"

С самого появления JavaScript получил репутацию гадкого утенка профессионального программирования.

Разработчики на Java, игнорировали JavaScript за неуклюжесть и отсутствие привычного объектно-ориентированного подхода в классическом понимании.

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

Невостребованность и отсутствие четкого позиционирования затормозили развитие языка и превратили в инструмент, пригодный для совсем элементарных вещей - оживление отдельных элементов страницы.

Черная полоса JavaScript продолжалась вплоть до 2006 года, пока Джон Резиг не представил библиотеку jQuery.

Крохотной библиотеке jQuery было суждено превратить гадкого утенка в прекрасного лебедя и заставить разработчиков взглянуть на JavaScript с другой стороны.

Библиотека jQuery элегантно решила проблемы взаимодействия с Ajax, кроссбраузерности, работы с DOM.

Веб-разработчики повсеместно начали внедрять jQuery в свои проекты.

 

kmp рекомендует: Г. Х. Андерсен "Гадкий утёнок" (или мультфильм).

И дети и взрослые говорили:
- Новый лебедь лучше всех! Он такой красивый и молодой!
И старые лебеди склонили перед ним головы.

 

 

 

jQuery

jQuery - библиотека для JavaScript, которая значительно упрощает и ускоряет написание JavaScript-кода.

jQuery создал Джон Резиг (John Resig) и представилее 2006 году (в 22 года).

Девиз jQuery "write less, do more" (пиши меньше, делай больше).

jQuery поддерживается всеми браузерами

Для jQuery написано огромное количество плагинов.

Блог Джона Резига: http://ejohn.org

Смотрим: Using JavaScript to Teach JavaScript by John Resig

Учебник: jQuery для начинающих

 

 

Чтобы начать использовать jQuery необходимо:

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

  2. Добавить ее на страницу. Для этого следующий код должен быть добавлен на страницу в секцию head:

<script type="text/javascript" src="путь_к_скачанному_файлу/jquery.min.js"></script>

Пример:

  1. <html>
  2.     <head>
  3.         <script src="/путь_к_папке_с_файлом/jquery-3.1.1.min.js"></script>
  4.         <script>
  5.         $(function()
  6.         {
  7.             alert('Подключена локальная версия jQuery через собственный хостинг');
  8.         });
  9.         </script>
  10.     </head>
  11. </html>

После успешного подключения, у вас должно появиться alert сообщение, о том что jQuery подключен.

 

Способ удаленного использования jQuery от Google: добавить на страницу в контейнер <head></head> следующий код:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

 

Примечание: 3.1.1 - актуальная на 29 января 2017 года версия jQuery

Последнюю версию jQuery можно узнать на официальном сайте jQuery а код подключения лучше брать прямо из Google - https://developers.google.com/speed/libraries/#jquery

 

 

 

 

 

Кризис лебединного возраста

JavaScript получил второе рождение с jQuery!

Однако, популярность и низкий порог вхождения в JavaScript создали волну хаоса.

Количество кода на JavaScript скоро стало зашкаливать, а типичное веб-приложение превращаться в лапшу из html/css/js-кода.

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

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

Оставалось лишь собрать лучшие из них и перенести в мир JavaScript. Так стали появляться первые фреймворки.

В основе большинства лежали модный архитектурный MV*-паттерн (MVC, MVVM, MVP, HMVC и т.д.) и, само собой, библиотека jQuery (чуть позже начали избавляться и от нее).

 

 

Первые фреймворки эффективно решали вопросы структуры разрабатываемого приложения и боролись с хаосом с помощью стандартов.

JavaScript поднялся на очередную ступень вверх и вновь заставил обратить на себя внимание.

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

JavaScript стал обязательным инструментом для разработки и поставки приложений в современных компаниях.

 

 

 

Angular.js

AngularJS – героический фреймворк для JavaScript

AngularJS разработан в 2009 году Мишко Хевери (Misko Hevery) с коллегами. Вскоре взят под крыло Google.

Смотрим видео с Misko Hevery

AngularJS с помощью огромного набора инструментов позволяет создавать мощные, простые в обслуживании и структурированные приложения.

AngularJS существенно облегчает разработку динамических приложений, благодаря своему синтаксису, простой визуальной манипуляции объектами, а также двусторонней привязке данных.

Ключевой компонент AngularJS – директивы, позволяющие естественным образом расширить возможности HTML. Директивы помогают структурировать повторно используемые компоненты при помощи ваших собственных имен. Любой разработчик при необходимости может создать собственные директивы, тем самыми расширив функциональность.

AngularJS также применяет контроллеры, "двустороннее связывание"и другие инструменты...

Последний термин и самый главный – «директивы». В этом уроке мы не будем показывать, как создать свои собственные директивы. Но я все же приведу парочку из них, так как в Angular есть встроенные директивы. Обычно, они начинаются с ng и очень полезны. Без лишних слов, давайте делать красиво.

 AngularJS использует декларативный подход (приложение вообще может не включать ни единой строчки JavaScript и вполне нормально работать!).

Официальный сайт фреймворка AngularJS: http://angularjs.org/ (там можно найти исходные файлы, обучающие материалы и другие сопроводительные материалы относительно библиотеки).

Быстрый старт за 5 минут с Angular 2 beta (перевод)

Angular 2 Beta, обучающий курс часть 1 (дальше по ссылкам)

 

AngularJS-2017:

 

 

 

Angular.js vs jQuery

AngularJS имеет относительно низкий порог вхождения.

Начать разработку простых вещей на AngularJS достаточно легко, но по мере их усложнения придется не раз обратиться к источникам знаний и переосмыслить уже имеющиеся.

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

 

 

AngularJS - это совершенно иной инструмент.

  • jQuery — это библиотека. AngularJS — это фреймворк.

  • Когда код работает с библиотекой, он сам решает, когда вызывать ту или иную функцию. В случае же фреймворка разработчик реализует обработчики событий, и уже фреймворк решает, в какой момент их вызывать.

Код jQuery вызывается только в ответ на что-то, что произошло в коде — когда сработал триггер какой-либо из функций, вызванный событием DOM.

Angular же на стадии загрузки превращает дерево DOM и код в angular-приложение.

HTML-разметка страницы с angular-директивами и фильтрами в ней компилируются в дерево шаблонов, соответствующие области видимости (scope) и контроллеры присоединяются к ним в нужных местах, внутренний цикл работы приложения обеспечивает правильную привязку данных между представлением и моделью.

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

 

 

Node.js

Node.js — программная платформа на V8, транслирующая JavaScript в машинный код, что:

  • превращает JavaScript из специализированного скриптового языка в язык общего назначения,

  • открывает возможность взаимодействовать JavaScript-коду с устройствами ввода-вывода,

  • позволяет подключать другие нешние библитеки, написанные на разных языках из JavaScript-кода,

  • обеспечивает  серверные решения для JavaScript,

  • позволяет разрабатывать десктопные оконные приложения (при помощи NW.js, AppJS или Electron),

  • позволяет программировать микроконтроллеры.

V8  (транслятор JavaScript в машинный код) - в основе браузера Chromium, на основе которого создаются браузеры (Chrome, Opera, Яндекс...  Android — мобильный браузер, входящий в Android OS.

 

Node.js разработал Райан Дал (англ. Ryan Dahl) в 2009 году  с целью получения простой способа построения масштабируемых сетевых серверов.

Читать: Ben Rossi: The rise of Node.js and why it will rule enterprise software development for at least a decade, там:

  • Node.js появился после того, как Google выпустил релиз JavaScript движка V8, который задумывался как JavaScript-интерпретатор для браузера Google Chrome. Вскоре после открытия исходного кода V8 Райан Дал (Ryan Dahl), создатель Node.js, понял, что интерпретатор может быть использован для создания совершенно нового концепта серверного JavaScript.

  • Эксперты в IT-индустрии отмечают, что скриптовый язык на основе JavaScript – обязательный инструмент для разработки и поставки приложений в современных компаниях.

  • Node.js продолжает развиваться с практически беспрецедентной скоростью. За последние пять лет разработчиками было добавлено более 190 000 модулей для Node.js (и других библиотек JavaScript).

  • В сентябре 2015 года центральный репозиторий npm.js преодолел рубеж в 2 миллиарда загрузок.

  • Node.js способен значительно сократить время разработки приложения, сохраняя при этом тот же функционал.

  • В среде разработчиков к Node относятся очень благосклонно и уважают специалистов по этой технологии.

  • Node.js отлично подходит для приложений, построенных на архитектуре микросервисов, благодаря низкому потреблению ресурсов процессора, своей вычислительной мощности и эффективному использованию RAM.

  • Даже наиболее консервативные части IT-сообщества теперь признают, что Node стремительно взрослеет. Node уже показал себя многообещающим для разработки в области Интернета Вещей.

 

 

Райан Дал о Node.js

Из интервью Райан Дала на конференции Node Summit-2012 (Сан-Франциско):

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

— Почему Node распространяется как огонь, если можно так выразится?
— Выяснилось, что многим людям нравится программировать на JavaScript, и поэтому возник большой интерес со стороны пользователей к разработке.

— Существуют ли какие-либо особые преимущества Node для платформы облачных вычислений ?
— JavaScript – это хорошая платформа. У нее есть хороший API. Очень компактный. Так что я считаю, это делает платформу удобной в целом.

Смотреть: Ryan Dahl: Original Node.js presentation

 

 

 

React

Если Вы согласны, никто больше не использует JQuery, можно попробовать React: это — 201Х!

Sing Li:

  • JavaScript — который поддерживается всеми современными браузерами и бесспорно является де-факто естественным языком веб-программирования — имеет прямой доступ ко всему богатству функций «веб как платформы».

  • Сложные JavaScript-проекты выходят за рамки возможностей программистов-одиночек и переходят в руки крупных команд разработчиков. Этот сдвиг несет с собой целый букет проблем.

  • Начните использовать библиотеку JavaScript с открытым исходным кодом React!.

  • Изучив примеры из этого руководства, вы освоите приемы создания простых в обслуживании многоразовых React-компонентов..

Robin Wieruch (software enginee, avid reader-learning and teaching #JavaScript): 10 причин, по которым я перешел с Angular на React

 

27.09.2017 Вышел React 16 (с прежним API и новым ядром, улучшенной обработкой ошибок (границы ошибок) и поддержкой вывода подсекции дерева рендеринга в другой узел DOM.

 

 

 

 

Vue.JS

Vue.js - JavaScript фреймворк с собственным языком шаблонов для упрощения веб-разработки.

Создателем  является Evan You, бывший сотрудник Google и Meteor Dev Group.

Evan You начал разрабатывать Vue.js в 2013-м.

В феврале 2014-го был первый публичный релиз Vue.js.

В 2017 Vue.js вошел в число ведущих платформ для разработки фронтенда (благодаря его простому API и богатому набору вспомогательных средств.

У Vue.js  появились десятки популярных библиотек для разработки пользовательских интерфейсов и шаблонов проектов.

Vue.js начали внедрять многие крупные компании. Cвободная система управления репозиториями GitLab тоже перешла на Vue.js.

Значительной части успеха Vue обязан своей компонентной модели. Все компоненты Vue являются и экземплярами Vue - они принимают одинаковые объекты с параметрами и предоставляют те же возможности по обработке событий.

Библиотеки Vue 2018 года:

  • Vuetifyjs   предоставляет более 80 компонентов следующих принципам Google Material Design.

  • vuematerial предоставляет компоненты следующие Google Material Design и поддерживает динамические темы.

  • Keen-UI включает только компоненты, использующие JavaScript и не является CSS-фреймворком.

  • Element предоставляет компоненты для Vue 2.0. Документация на китайском.

  • Buefy представляет компоненты, построенные с использованием возможностей Vue и Bulma.

  • bootstrap-vue  предназначена для создания отзывчивых мобильных веб-приложений.

  • Fish-UI —  содержит десятки хорошо структурированных компонентов для создания  интерфейсов.

  • Quasar предоставляет десятки Vue-компонентов, которые включают HTML-разметку, CSS-стили и код на JavaScript.

  • Vux  рассчитана на разработку мобильных приложений,  в документации (на китайском) интерактивные демонстрационные версии компонентов.

 

 

 

Что лучше выбрать в 2020 году — React или Vue?

Patricia Neil, React VS Vue: Which is better for 2020?

 

 

 

Where are JavaScript frameworks going in 20**?

Читать:

  • Technology isn’t waiting around for anybody, and the development and tools of JavaScript in particular are very fast-paced.
    Even if you are familiar with JavaScript and some of its frameworks, what was the best of the best in 2016 may well be completely outdated and replaced by newer technology in 2017...      Where are JavaScript frameworks going in 2017?

а также:

 

 

 

 

 

Структуры данных для JavaScript

  • Mnemonist (коллекция структур данных, реализованных на JavaScript)

 

 

 

Статистические методы для JavaScript

  • Simple Statistics  - простая и хорошо документированная (!) библиотека JavaScript,
    реализуюшая основные (!) статистические методы.

 

 

 

 JavaScript и DOM

Между прочим:

элементы React это объекты JavaScript, которые представляют элементы HTML. Их нет в браузере. Они представляют элементы DOM такие как h1, div, section и другие.

Поэтому:

 

kmp