Frontend kick-off talk at Epam

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

JavaScript

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

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

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

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

  • замыкания

  • анонимные функции

  • автоматическая сборка мусора

  • прототипное наследование

199x

Август 26, 2006

Август 2011

Responsive Web Design

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

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

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

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 так и в ООП стиле
  • легкий вход делает продолжение и реальное мастерство сложным
  • огромное количество библиотек в открытом доступе
  • динамическая типизация 
  • прототипное наследование

Матчасть

  • Прототипное наследование
  • Функции как обьекты высшего порядка
  • Замыкания, каррирование
  • Как браузер работает с 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

Всем спасибо! Вопросы?

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

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

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

BE to FE cource kick-off talk @ Epam

By Igor Konovalov

Made with Slides.com

BE to FE cource kick-off talk @ Epam

Обзорная лекция о совремменном фронтенде для участников курса повышения профессиональной квалификации BE to FE в Епаме. Июль 2019

  • 273

More from Igor Konovalov