JavaScript и Frontend завтра Андрей Листочкин
May 06, 2015
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