Недавно я выступил в Департаменте технологий с докладом о JavaScript, чтобы прояснить, что представляют собой все эти аббревиатуры и фреймворки JavaScript.
Целевой аудиторией были менеджеры, супервайзеры и те старожилы, которые начали программировать 20 лет назад и слышали о JS или даже написали пару функций, но никогда не могли понять, что происходит в JavaScript. Все они слышали о Node.js, AngularJs, TypeScript, lint и даже Karma, но что они означают, если они так или иначе JavaScript, то почему так много названий?
Если у вас есть подобные вопросы, то продолжайте читать, в этой статье мы попытаемся это прояснить.
Прочитав эту статью, вы сможете ответить на следующие вопросы:
- Как JavaScript вписывается в языки программирования?
- Что такое ES5, ES6, ECMAScript, ES 2015?
- Что такое транспилер?
- Что такое полифилл?
- Что такое Node.js?
- что такое NPM и пряжа?
Обратите внимание, что это полный обзор, также известный как вводная статья.
ЧТО ТАКОЕ ДЖАВАСКРИПТ?
Несмотря на упоминание слова «Script» в JavaScript, JavaScript — это независимый язык. На первый взгляд, он имеет знакомую семантику, как Java, но он также знаком, если вы пришли с C# и PHP, но, будучи функциональным языком, он имеет совершенно другой синтаксис, чем Scheme, Haskel или Scala!
Почему я упоминаю эти языки?
Что ж, все миллионы языков программирования можно разделить только на две категории. (Да, вы можете возразить, что это нечто большее, и отнестись к этому очень философски, в Википедии больше статей: https://en.wikipedia.org/wiki/Programming_paradigm, но, на мой взгляд, следующие две категории были бы отличное начало для организации языков, особенно если вы новичок в этом)
1- Императив
2- Функциональный
C# и Java войдут в первую категорию (императив), думайте о них как об английском языке с другим акцентом или словарной базой, «Сочинения Шекспира» на английском языке, как и «Думай и богатей», но они такие разные.
JavaScript, Scala, Haskel, Scheme и LISP относятся ко 2-й категории (функциональные).
из упомянутых выше функциональных языков JavaScript имеет наиболее знакомый синтаксис для императивных языков и даже пытается имитировать класс и объектно-ориентированный дизайн, особенно с введением ES6.
Хотя класс JavaScript может выглядеть как класс C#, внутри они совершенно разные.
в любом случае, как я упоминал ранее, я просто пытаюсь дать обзор, а более глубокое изучение нюансов и спецификаций дизайна для каждого языка не входит в задачу, и у меня нет всего опыта и знаний.
ЧТО ТАКОЕ ES6? (ЭКМАСКРИПТ)
ES6 относится к ECMAScript 2015 (6-е издание ECMAScript). Подробнее об этом можно прочитать в Википедии или на официальном сайте: ecma-international.org.
Полные спецификации ES6 или ES 2015 можно прочитать на http://www.ecma-international.org/ecma-262/6.0/
Статья в Википедии: https://en.wikipedia.org/wiki/ECMAScript
По сути, с новыми спецификациями JavaScript получит новые функции. Это аналогичная концепция для C # 3 до C # 7. Или версии .Net Framework. В новых языковых спецификациях есть функции, которых не было в предыдущей версии.
Вот один из моих любимых, оператор Spread:
Предположим, у нас есть массив чисел, и мы хотим найти максимум между этими числами:
номера переменных = [361,9,95,19];
Мы могли бы просто использовать ЕСЛИ это не массив:
var max = Math.max(361,9,95,19);
С новым оператором распространения мы можем сделать это так:
var max = Math.max(…числа);
Вот и все! Одним из самых больших преимуществ оператора распространения является вставка элемента перед массивом. вставить что-то в конец массива очень просто, мы просто делаем push. Предположим, у нас есть массив с именем «массив», и мы хотим вставить перед ним «новый элемент»:
var array = [newItem, …array];
К сожалению, не все функции и операторы, предлагаемые в ES6, реализованы повсеместно, каждый поставщик движка JavaScript должен предоставить эти новые функции.
ЧТО ТАКОЕ ТРАНСПИЛЕРЫ?
Поэтому, если вы пишете javascript для браузера Chrome, он использует движок Google V8, который имеет 97% функций ES6. Но если вы также хотите поддерживать IE11, он поддерживает только 11% этих новых функций. ой! это проблема.
прежде чем я перейду к тому, как сообщество пытается решить эту проблему, я хотел бы упомянуть ценный ресурс о совместимости. Есть проект под названием Kangax, он действительно классный! вы можете увидеть все браузеры, полифилы и серверы и посмотреть, сколько из этих функций они реализуют.
Сайт расположен по адресу https://kangax.github.io/compat-table/es6/
Моя любимая часть сайта — левая сторона. Перечислены все функции ES6, и справа от этого поля есть маленькая стрелка. если вы нажмете на это, будут перечислены все различные аспекты этой функции, а также есть пример тестового кода о том, как это оценить. Это один из лучших инструментов обучения.
хорошо, теперь, чтобы решить эту несовместимость, один из подходов заключается в том, что вы пишете свой javascript в стиле ES6, а затем используете Transpiler (вид компилятора) для преобразования (Transpile) вашего кода ES6 в код ES5, который имеет много больше совместимости.
Babel, например, является одним из популярных транспиляторов в этом отношении.
По сути, вы пишете код на ES6 и используете Babel для преобразования его в ES5, а затем запускаете свой код. Процесс может быть автоматизирован во время разработки, чтобы ваш код транспилировался, минимизировался и сохранялся в папке «сборка», на которую затем вы могли ссылаться в браузере.
Или можно включить транспилятор на веб-страницу, таким образом ваш код будет транспилироваться во время выполнения. этот подход может быть приемлемым для настольных браузеров, но определенно не очень хорошей идеей для мобильных устройств и планшетов.
ЧТО ТАКОЕ МАШИНОСТРОИТЕЛЬ?
Еще один побочный эффект этой Транспиляции (если это не то слово, то должно быть
является изобретением нового типизированного языка под названием TypeScript, он похож на классический JavaScript, но также имеет свои особенности. С официального сайта машинописи: http://www.typescriptlang.org/
В основе TypeScript лежит тот же синтаксис и семантика, которые сегодня известны миллионам разработчиков JavaScript. Используйте существующий код JavaScript, включайте популярные библиотеки JavaScript и вызывайте код TypeScript из JavaScript.
TypeScript компилируется в чистый, простой код JavaScript, который работает в любом браузере, на Node.js или в любом движке JavaScript, поддерживающем ECMAScript 3 (или новее).
Вот как это работает:
После написания кода на машинописном языке вы будете использовать компилятор машинописного текста для компиляции TypeScript в «классический» JavaScript.
На веб-сайте typescript есть отличная площадка, где вы можете увидеть, как работает эта транспиляция, а также вы можете поэкспериментировать с ней, не устанавливая ничего на свою машину.
Вот адрес: http://www.typescriptlang.org/play/index.html
TypeScript создан Microsoft и теперь является одним из официальных языков, поддерживаемых Google. У Google есть сложный процесс внутреннего внедрения языка (обычно это занимает 2 года).
КАК NODE.JS ВМЕСТИТСЯ ВО ВСЮ ЭТУ ИСТОРИЮ?
Еще пару лет назад основное присутствие JavaScript было в мире браузеров. Также стоит отметить, что объект документа, который широко используется в веб-разработке, существует ТОЛЬКО в браузерах. поэтому TypeScript и чистый JavaScript не имеют понятия об объекте документа или объекте окна; поэтому такие команды, как document.getElementById("demo"); Объект Window и вообще весь объект HTML DOM имеет смысл только в браузере.
Node.js использует движок Google V8 JavaScript Engine и позволяет писать javascript, который запускается на сервере! Так что теперь все веб-разработчики, которые уже знали javascript, также могли писать серверный код. JavaScript как на клиенте, так и на сервере имеет смысл!
Как я уже упоминал, это всего лишь обзор, но если вам нужны похожие статьи, но более подробные, или вы хотите провести семинар или презентацию для своей компании, просто напишите мне или прокомментируйте этот пост, и я сделать все возможное, чтобы обеспечить это.
Вы можете узнать больше о Node.js в Википедии или на официальном сайте Node.js.
https://en.wikipedia.org/wiki/Node.js
Официальный сайт: https://nodejs.org/en/
ЧТО ТАКОЕ НПМ?
По мере того, как сообщество Node.js росло, они начали создавать пакеты (модули), которые мог использовать каждый, например, пакет для преобразования чисел в римские цифры, или создание WebApi, или отправку электронных писем, и тысячи других. Наиболее распространенным способом управления ими было использование небольшой, но замечательной утилиты под названием npm: Node Package Management. или диспетчер пакетов узла. Недавно в блоке также появился новый ребенок под названием yarn, который, по сути, делает то же самое. Эти инструменты также можно назвать инструментами Управление зависимостями.
Опять же, поскольку это всего лишь обзор, мы не будем углубляться в них, но если вы хотите запустить новое приложение Node.js, сначала загрузите и установите Node.js, тогда вы можете сделать:
инициализация npm
и ответьте на пару вопросов. Теперь у вас есть готовое приложение npm. вы можете создать файл index.js и сделать его приложением Node.js, или вы можете добавить некоторые другие библиотеки и сделать его приложением React или Angular.
Предполагая, что нам нужно приложение Node.js, вам нужно создать файл index.js, это будет точка входа для вашего приложения.
Если мы хотим добавить ведение журнала, есть пакет winston, мы можем просто установить его следующим образом:
npm install winston – сохранить
а затем в нашем файле index.js мы можем использовать его:
var winston = требуется («винстон»);
winston.log('info', 'Привет, распределенные лог-файлы!');
winston.info('Здравствуйте, снова раздавались логи');
Вы можете запустить приложение node.js, набрав
индекс узла
Во второй части этой статьи «как понять смысл» я попытаюсь сделать краткий обзор тестирования JavaScript (Jasmine, Karma, Mocha, Chai….) и Linting, а также упомяну некоторые другие популярные библиотеки, такие как Lodash, jQuery, Бриз, …
Я надеюсь, что это даст вам хороший обзор мира JavaScript, чтобы вы могли увидеть, как эти разные компоненты сочетаются друг с другом. Пожалуйста, посетите www.CodeWix.com для других интересных статей. Есть один для добавления Параллельная обработка всего двумя строками кода!
Если у вас нет pluralsight, рекомендую проверить, это отличный инструмент для обучения.
Средства обучения:
Удачного кодирования :)
