Frontend kick-off talk at Epam
Когда пытаешься рассказать про фронтенд в 2019
JavaScript
- Первая версия была написана за 10 дней Бренданом Эйхом в 1994г.
- Сначала назывался LiveScript, а до этого Mocha
- Java появилась в названии по маркетинговым соображениям
- Обладал рядом существенных отличий от наиболее популярных языков, таких как С и Java
Основные особенности языка
-
динамическая типизация
-
функции как объекты первого порядка
-
замыкания
-
анонимные функции
-
автоматическая сборка мусора
-
прототипное наследование
199x
Август 26, 2006
Август 2011
Responsive Web Design
Этан Маркотт - Май 25, 2010
2009
В 2017 году количество пакетов в npm превысило 350000
появление npm стало поворотной точкой в развитии языка
Разработка нативных приложений на JS
2013
Node JS - backend
Chromium - frontend
Появление фреймворков
2009
2014
2013
Нативные приложения для Android и iOS
2015
Светлое будущее
в 2018
Страница является приложением, которое написано с применением одного из фреймворков и может содержать сотни тысяч строк кода*
+ она должна одинаково хорошо выглядеть и работать на устройствах с любой шириной экрана
+ может общаться как с сервером, так и с базой данных
* over 400000 на текущем проекте, исключая node_modules
Что написано на JS*
*почти все
нативные приложения для Android и iOS (Rect Native)
SoundCloud Pulse
Uber
Facebook app
Skype
Discord
Baidoo app
Сложные и ресурсоёмкие приложения в сети:
Google docs
Figma
YouTube
Polymer/web components
Про язык
Learning curve
JavaScript
Java
C++, Lisp, Haskell
- относительно легкий вход
- огромное количество библиотек в открытом доступе
- огромное и открытое комьюнити
- возможность применения как на клиенте, так и на сервере
- разработка приложений для любых платформ
- с WASM стал быстр
- динамическая типизация
- прототипное наследование
- возможность писать как FP так и в ООП стиле
- легкий вход делает продолжение и реальное мастерство сложным
- огромное количество библиотек в открытом доступе
- динамическая типизация
- прототипное наследование
Матчасть
- Прототипное наследование
- Функции как обьекты высшего порядка
- Замыкания, каррирование
- Как браузер работает с JS (eventloop, browser api)
- Выполнение асинхронных операций
- Верстка (флексбокс, гриды)
Инструменты разработчика
Babel
const arr = [1,2,3,4,5];
const [firstElement, ...rest] = arr;"use strict";
var arr = [1, 2, 3, 4, 5];
var firstElement = arr[0],
rest = arr.slice(1);Webpack
Eslint
Тестирование (Jest, Mocha)
Chrome (Firefox) console and debugger
Всем спасибо! Вопросы?
Что почитать/посмотреть:
Спасибо за внимание!
