Frontend kick-off talk at Epam

О себе

  • старший разработчик в Епам

  • провожу технические интервью

  • увлекаюсь путешествиями, был в 30 странах
  • люблю функциональное программирование в умеренных дозах

twitter: @igor_dlinni

github: IgorKonovalov

Когда пытаешься рассказать про фронтенд в 2018

Немного истории

JavaScript

  • Первая версия была написана за 10 дней Бренданом Эйхом в 1994г.
  • Сначала назывался LiveScript, а до этого Mocha
  • Java появилась в названии "потому что модно"
  • Обладал рядом существенных отличий от наиболее популярных языков, таких как С и Java

Основные особенности языка

  • динамическая типизация

  • функции как объекты первого порядка
  • замыкания
  • анонимные функции
  • автоматическая сборка мусора
  • прототипное наследование

199x

в 90-х страница состояла из

  • разметки в html

  • таблицы стилей 

  • пары скриптов для кнопок/меню

https://web.archive.org/web/20180331120843/http://www.realtek.com:80/

Август 26, 2006

Август 2011

Responsive Web Design

Этан Маркотт - Май 25, 2010

https://alistapart.com/article/responsive-web-design

ES6

2015

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

К 2019 году количество разработчиков на Java и серверном JS сравняются

2009

В 2017 году количество пакетов в npm превысило  350000

Разработка нативных приложений на 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

https://facebook.github.io/react-native/showcase.html

Сложные и ресурсоёмкие приложения в сети:

Google docs

Figma

https://www.figma.com/blog/building-a-professional-design-tool-on-the-web/

YouTube

Polymer/web components

Про язык

Learning curve

JavaScript

Java

C++, Lisp, Haskell

  • относительно легкий вход
  • огромное количество библиотек в открытом доступе
  • огромное и открытое комьюнити
  • возможность применения как на клиенте, так и на сервере
  • разработка приложений для любых платформ
  • с WASM стал быстр
  • динамическая типизация
  • прототипное наследование
  • возможность писать как  FP так и в ООП стиле
  • легкий вход делает продолжение и реальное мастерство сложным
  • огромное количество библиотек в открытом доступе
  • динамическая типизация 
  • прототипное наследование

Навигация в бурном море библиотек

Любая библиотека или пакет npm - только надстройка над языком

Важно понимать,

Учите матчасть, господа 

  • Прототипное наследование
  • Функции как обьекты высшего порядка
  • Замыкания, каррирование
  • Как браузер работает с JS (eventloop, browser api)
  • Выполнение асинхронных операций
  • Верстка (флексбокс, гриды) 

Инструменты разработчика

Редактор кода

GIT

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

Code quality assurance

CI/CD

Немного о мотивации

Что почитать/посмотреть:

Спасибо за внимание!

https://slides.com/ikonovalov/frontend-kickoff#/

Made with Slides.com