1. JavaScript и Frontend
завтра
Андрей Листочкин

4. 2013

7. 1989 - WWW

8. 1994 - Netscape

9. 1995 - JavaScript, Internet
Explorer, SSL

10. 1997 - Rhino

11. 1996 - CSS, Opera

12. 1999 - Ajax

13. 2000 - XHTML,
Opera Mobile

14. 2001 - SVG, JSON,
Venkman

15. 2002 - Firefox, jsLint

16. 2003 - Safari,
Opera Platform

18. 2004 - Dojo, Gmail,
Web 2.0, E4X, WHAT WG,
Ruby on Rails

19. 2005 - Prototype,
CouchDB,
Google Maps, Opera Mini

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

21. 2007 - iOS Safari, Sass,
Caja, OpenSocial

22. 2008 - QUnit, YQL,
Raphaёl, Dragonfly,
TraceMonkey, Chrome

24. 2009 - CommonJS,
Narwhal, NodeJS, npm,
MongoDB, PhoneGap,
Underscore, CoffeeScript,
Less, SPDY, WebSockets,
EcmaScript 5

25. 2010 - Socket IO,
Knockout, Backbone,
Require JS

26. 2011 - Ember, IE9, Dart,
Twitter Bootstrap, d3,
Grunt, Brunch,
Browserify, Skybreak

27. 2012 - TypeScript,
Yeoman, Component,
Windows 8

28. 2013 - Firefox OS, asm.js,
Polymer

30. EcmaScript 6
Декабрь 2013

31. Модули
module 'MyComponent' {
import { dep } from 'https://dep.io/dep.js'
// Your Code
export // Exports
}

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

34. HTML Web Components
●
●
●
●
Shadow DOM
Custom Tags
Templates
HTML Imports

35. CSS
●
●
●
●
●
Custom Filters
Regions
Shapes
Variables
vh, vw, vmin, vmax

38. Мы где-то встречались
Custom Tags,
Shadow DOM, Web
Components
xml:ns, widgets,
iframes
local CSS reset
Object.observe
Getters/Setters
CSS
SVG

39. http://www.w3.org/TR/css-variables-1/
2013-06-20

40. http://www.w3.org/People/howcome/p/cascade.html
1994-10-10
font.size = 12pt
h1.font.size = font.size * 3
h2.font.size = font.size * 2.5
h3.font.size = font.size * 2

41. 19.5 лет
20

42. @howcome

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

47. Underscore JS, jQuery, Modernizr, es5-shim, Backbone,
Chaplin, Grunt, Karma, Mocha, ChaiJS, Node.js,
PhantomJS, CoffeeScript, Compass, jsHint, Bootstrap...

48. Backend Developer ~2010

49. Frontend Developer ~2013

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

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

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

53. HTTP
● параметры, запрос, ответ, cookie, headers,
подпись запросов Basic, oAuth, HMAC,
CSRF
● keep-alife, streaming
● cache, ETags, CORS,
● REST, JSON API: Authorization,
Sideloading, schema
● WebSockets

54. HTML
<br/>
X-UA-Compatible

55. CSS
●
●
●
●
●
border-radius
transitions
transforms
OOCSS
StyleGyide

56. Браузеры
●
●
●
●
IE8, Opera Mini, Screen Readers
Апрель 2014
IE10 для Windows 7
devices

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

58. Progressive
Enhancement

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

60. Худеем:
● Polyfills >> Libraries:
es5 Array extras vs. Underscore
● jQuery?
custom builds
● Modernizr?
● Ext, GWT

61. Не делаем глупостей:
Из пушки по воробьям
d3
● IcedCoffeeScript
●

62. Здравый смысл:
if (array.hasOwnProperty(index))
{ get fullName: ... }
;
● AMD и билд???
●
●
●

63. Помогаем другим:
jQuery Plugin
npm, component, bower
● бонус: SourceLabs, ci.testling.com, TravisCI
●
●

64. Re-check your
assumptions!

65. Knockout vs Angular

66. Ember vs Angular

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

68. Re-check your
assumptions!

69. Underscore, Backbone,
RequireJS, CoffeeScript

72. Underscore, Backbone,
RequireJS, CoffeeScript
хипстер 2010 года

73. + Bootstrap + Grunt
2011

75. JavaScript

76. Frontend != JavaScript

77. Я не осилил CSS,
поэтому я frontend developer