java script и frontend завтра - kharkiv js 2013
TRANSCRIPT
![Page 1: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/1.jpg)
JavaScript и Frontend завтра
Андрей Листочкин
![Page 2: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/2.jpg)
![Page 3: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/3.jpg)
![Page 4: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/4.jpg)
2013
![Page 5: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/5.jpg)
![Page 6: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/6.jpg)
![Page 7: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/7.jpg)
1989 - WWW
![Page 8: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/8.jpg)
1994 - Netscape
![Page 9: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/9.jpg)
1995 - JavaScript, Internet Explorer, SSL
![Page 10: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/10.jpg)
1997 - Rhino
![Page 11: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/11.jpg)
1996 - CSS, Opera
![Page 12: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/12.jpg)
1999 - Ajax
![Page 13: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/13.jpg)
2000 - XHTML,Opera Mobile
![Page 14: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/14.jpg)
2001 - SVG, JSON, Venkman
![Page 15: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/15.jpg)
2002 - Firefox, jsLint
![Page 16: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/16.jpg)
2003 - Safari,Opera Platform
![Page 17: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/17.jpg)
![Page 18: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/18.jpg)
2004 - Dojo, Gmail,Web 2.0, E4X, WHAT WG,
Ruby on Rails
![Page 19: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/19.jpg)
2005 - Prototype, CouchDB,
Google Maps, Opera Mini
![Page 20: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/20.jpg)
2006 - GWT, YUI, jQuery, Ext JS, Firebug, Widgets
![Page 21: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/21.jpg)
2007 - iOS Safari, Sass, Caja, OpenSocial
![Page 22: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/22.jpg)
2008 - QUnit, YQL, Raphaёl, Dragonfly,
TraceMonkey, Chrome
![Page 23: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/23.jpg)
![Page 24: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/24.jpg)
2009 - CommonJS, Narwhal, NodeJS, npm, MongoDB, PhoneGap,
Underscore, CoffeeScript, Less, SPDY, WebSockets,
EcmaScript 5
![Page 25: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/25.jpg)
2010 - Socket IO, Knockout, Backbone,
Require JS
![Page 26: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/26.jpg)
2011 - Ember, IE9, Dart, Twitter Bootstrap, d3,
Grunt, Brunch, Browserify, Skybreak
![Page 27: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/27.jpg)
2012 - TypeScript, Yeoman, Component,
Windows 8
![Page 28: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/28.jpg)
2013 - Firefox OS, asm.js, Polymer
![Page 29: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/29.jpg)
![Page 30: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/30.jpg)
Декабрь 2013
EcmaScript 6
![Page 31: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/31.jpg)
module 'MyComponent' {
import { dep } from 'https://dep.io/dep.js'
// Your Code
export // Exports
}
Модули
![Page 32: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/32.jpg)
TC39: EcmaScript 6
● Модули● Proxy● let● =>● destructuring assignment● генераторы● rest параметры● classes● ...
![Page 33: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/33.jpg)
![Page 34: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/34.jpg)
HTML Web Components
● Shadow DOM● Custom Tags● Templates● HTML Imports
![Page 35: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/35.jpg)
CSS
● Custom Filters● Regions● Shapes● Variables● vh, vw, vmin, vmax
![Page 36: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/36.jpg)
![Page 37: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/37.jpg)
![Page 38: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/38.jpg)
Мы где-то встречались
Custom Tags, Shadow DOM, Web Components
Object.observe
CSS
xml:ns, widgets, iframeslocal CSS reset
Getters/Setters
SVG
![Page 39: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/39.jpg)
http://www.w3.org/TR/css-variables-1/
2013-06-20
![Page 40: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/40.jpg)
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
![Page 41: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/41.jpg)
19.5 лет20
![Page 42: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/42.jpg)
@howcome
![Page 43: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/43.jpg)
![Page 44: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/44.jpg)
![Page 45: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/45.jpg)
![Page 46: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/46.jpg)
● Выбор инструментов● Движение технологий● Рост требований к фронтенд инженеру● Веб-ожирение
Сложности
![Page 47: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/47.jpg)
Underscore JS, jQuery, Modernizr, es5-shim, Backbone, Chaplin, Grunt, Karma, Mocha, ChaiJS, Node.js,
PhantomJS, CoffeeScript, Compass, jsHint, Bootstrap...
![Page 48: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/48.jpg)
Backend Developer ~2010
![Page 49: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/49.jpg)
Frontend Developer ~2013
![Page 50: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/50.jpg)
Кое-что мы уже делаем правильно
● Мы не бежим от JavaScript'а● Мы стараемся использовать CSS● Мы строим архитектуру● Мы пишем тесты
![Page 51: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/51.jpg)
Но кое-что еще нет
● WebSocket по-умолчанию● No frameworks по-умолчанию● URL для всего по умолчанию● Красивый и удобный UI по умолчанию● Не суппортить IE < 9/10
![Page 52: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/52.jpg)
Что такое современный фронтендщик?
![Page 53: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/53.jpg)
● параметры, запрос, ответ, cookie, headers, подпись запросов Basic, oAuth, HMAC, CSRF
● keep-alife, streaming● cache, ETags, CORS,● REST, JSON API: Authorization,
Sideloading, schema● WebSockets
HTTP
![Page 54: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/54.jpg)
HTML
<br/>X-UA-Compatible
![Page 55: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/55.jpg)
CSS
● border-radius● transitions● transforms● OOCSS● StyleGyide
![Page 56: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/56.jpg)
Браузеры
● IE8, Opera Mini, Screen Readers● Апрель 2014● IE10 для Windows 7● devices
![Page 57: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/57.jpg)
UI
● widget libraries● Grids● :hover● content-as-a-UI● autosave, autosync
![Page 58: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/58.jpg)
Progressive Enhancement
![Page 59: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/59.jpg)
Engineering
● tests● Karma, Selenium???● Билд > 0.1 секунды - долгий● отдельный client build● monitoring● profiling
![Page 60: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/60.jpg)
Худеем:
● Polyfills >> Libraries: es5 Array extras vs. Underscore
● jQuery?custom builds
● Modernizr?● Ext, GWT
![Page 61: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/61.jpg)
Не делаем глупостей:
Из пушки по воробьям
● d3● IcedCoffeeScript
![Page 62: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/62.jpg)
Здравый смысл:
● if (array.hasOwnProperty(index))● { get fullName: ... }● ;
● AMD и билд???
![Page 63: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/63.jpg)
Помогаем другим:
● jQuery Plugin● npm, component, bower
● бонус: SourceLabs, ci.testling.com, Travis-CI
![Page 64: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/64.jpg)
Re-check your assumptions!
![Page 65: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/65.jpg)
Knockout vs Angular
![Page 66: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/66.jpg)
Ember vs Angular
![Page 67: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/67.jpg)
"Жизненный цикл" проекта
![Page 68: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/68.jpg)
Re-check your assumptions!
![Page 69: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/69.jpg)
Underscore, Backbone, RequireJS, CoffeeScript
![Page 70: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/70.jpg)
![Page 71: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/71.jpg)
![Page 72: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/72.jpg)
Underscore, Backbone, RequireJS, CoffeeScript
хипстер 2010 года
![Page 73: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/73.jpg)
2011
+ Bootstrap + Grunt
![Page 74: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/74.jpg)
![Page 75: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/75.jpg)
JavaScript
![Page 76: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/76.jpg)
Frontend != JavaScript
![Page 77: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/77.jpg)
Я не осилил CSS, поэтому я -
frontend developer
![Page 78: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/78.jpg)
![Page 79: Java script и frontend завтра - Kharkiv JS 2013](https://reader031.vdocuments.net/reader031/viewer/2022020101/554a0e96b4c90507558b4a72/html5/thumbnails/79.jpg)