JavaScript и Frontend завтра

Андрей Листочкин

2013

1989 - WWW

1994 - Netscape

1995 - JavaScript, Internet Explorer, SSL

1997 - Rhino

1996 - CSS, Opera

1999 - Ajax

2000 - XHTML,Opera Mobile

2001 - SVG, JSON, Venkman

2002 - Firefox, jsLint

2003 - Safari,Opera Platform

2004 - Dojo, Gmail,Web 2.0, E4X, WHAT WG,

Ruby on Rails

2005 - Prototype, CouchDB,

Google Maps, Opera Mini

2006 - GWT, YUI, jQuery, Ext JS, Firebug, Widgets

2007 - iOS Safari, Sass, Caja, OpenSocial

2008 - QUnit, YQL, Raphaёl, Dragonfly,

TraceMonkey, Chrome

2009 - CommonJS, Narwhal, NodeJS, npm, MongoDB, PhoneGap,

Underscore, CoffeeScript, Less, SPDY, WebSockets,

EcmaScript 5

2010 - Socket IO, Knockout, Backbone,

Require JS

2011 - Ember, IE9, Dart, Twitter Bootstrap, d3,

Grunt, Brunch, Browserify, Skybreak

2012 - TypeScript, Yeoman, Component,

Windows 8

2013 - Firefox OS, asm.js, Polymer

Декабрь 2013

EcmaScript 6

module 'MyComponent' {

import { dep } from 'https://dep.io/dep.js'

// Your Code

export // Exports

}

Модули

TC39: EcmaScript 6

● Модули● Proxy● let● =>● destructuring assignment● генераторы● rest параметры● classes● ...

HTML Web Components

● Shadow DOM● Custom Tags● Templates● HTML Imports

CSS

● Custom Filters● Regions● Shapes● Variables● vh, vw, vmin, vmax

Мы где-то встречались

Custom Tags, Shadow DOM, Web Components

Object.observe

CSS

xml:ns, widgets, iframeslocal CSS reset

Getters/Setters

SVG

http://www.w3.org/TR/css-variables-1/

2013-06-20

http://www.w3.org/People/howcome/p/cascade.html

1994-10-10

font.size = 12pt

h1.font.size = font.size * 3h2.font.size = font.size * 2.5h3.font.size = font.size * 2

19.5 лет20

@howcome

● Выбор инструментов● Движение технологий● Рост требований к фронтенд инженеру● Веб-ожирение

Сложности

Underscore JS, jQuery, Modernizr, es5-shim, Backbone, Chaplin, Grunt, Karma, Mocha, ChaiJS, Node.js,

PhantomJS, CoffeeScript, Compass, jsHint, Bootstrap...

Backend Developer ~2010

Frontend Developer ~2013

Кое-что мы уже делаем правильно

● Мы не бежим от JavaScript'а● Мы стараемся использовать CSS● Мы строим архитектуру● Мы пишем тесты

Но кое-что еще нет

● WebSocket по-умолчанию● No frameworks по-умолчанию● URL для всего по умолчанию● Красивый и удобный UI по умолчанию● Не суппортить IE < 9/10

Что такое современный фронтендщик?

● параметры, запрос, ответ, cookie, headers, подпись запросов Basic, oAuth, HMAC, CSRF

● keep-alife, streaming● cache, ETags, CORS,● REST, JSON API: Authorization,

Sideloading, schema● WebSockets

HTTP

HTML

<br/>X-UA-Compatible

CSS

● border-radius● transitions● transforms● OOCSS● StyleGyide

Браузеры

● IE8, Opera Mini, Screen Readers● Апрель 2014● IE10 для Windows 7● devices

UI

● widget libraries● Grids● :hover● content-as-a-UI● autosave, autosync

Progressive Enhancement

Engineering

● tests● Karma, Selenium???● Билд > 0.1 секунды - долгий● отдельный client build● monitoring● profiling

Худеем:

● Polyfills >> Libraries: es5 Array extras vs. Underscore

● jQuery?custom builds

● Modernizr?● Ext, GWT

Не делаем глупостей:

Из пушки по воробьям

● d3● IcedCoffeeScript

Здравый смысл:

● if (array.hasOwnProperty(index))● { get fullName: ... }● ;

● AMD и билд???

Помогаем другим:

● jQuery Plugin● npm, component, bower

● бонус: SourceLabs, ci.testling.com, Travis-CI

Re-check your assumptions!

Knockout vs Angular

Ember vs Angular

"Жизненный цикл" проекта

Re-check your assumptions!

Underscore, Backbone, RequireJS, CoffeeScript

Underscore, Backbone, RequireJS, CoffeeScript

хипстер 2010 года

2011

+ Bootstrap + Grunt

JavaScript

Frontend != JavaScript

Я не осилил CSS, поэтому я -

frontend developer