0
Фронтенд
I. Инструменты
Фронтенд
01. АНТОН ЕПРЕВ

// a.eprev



02. ЕГОР ДЫДЫКИН // e.dydykin

- @corp.mail.ru

03. ИВАН ЧАШКИН

/

// i.chashkin
...
Модули
01. АРХИТЕКТУРА // 2 СЗ + КР
02. DOM & AJAX // 3 СЗ + КР
03. ОТДЛАДКА И МОБИЛЬНЫЙ ВЕБ // 3 СЗ + КР

4
“

Определение
Веб-приложение — клиент-серверное приложение, в котором
клиентом выступает браузер, а сервером — веб-сервер...
HTTP, JavaScript,
Backbone, DOM,
Events, AJAX,
WebSockets,
Sass, Grunt…
Демо
Контрольные рубежи
01. РК №1 <= 20
02. РК №2 <= 60
03. РК №3 <= 100

8
Итоговая оценка
01. 0 <= "НЕУДОВЛЕТВОРИТЕЛЬНО" <= 59
02. 60 <= "УДОВЛЕТВОРИТЕЛЬНО" <= 74
03. 75 <= "ХОРОШО" <= 89
04. 90 <...
Критерии оценки
01. СООТВЕТСТВИЕ РЕЗУЛЬТАТА ПРЕДЪЯВЛЯЕМЫМ ТРЕБОВАНИЯМ
02. ОПТИМАЛЬНОСТЬ ПРЕДЛАГАЕМОГО РЕШЕНИЯ
03. ПРАКТИЧН...
tp.eprev.org/p/1
Single Page
Application
Fest
Ресурсы
1.  http://nodejs.org
2.  https://npmjs.org
3.  http://gruntjs.com
4.  https://github.com/mailru/fest

17
Проектная
работа
Подготовка
01. $ node -v
02. v0.10.12

19
Приступаем!
01. $ mkdir epicgame & cd epicgame
02. $ npm init
03. $ cat package.json
04. $ npm install grunt-cli -g
05. $ ...
Gruntfile.js
01. module.exports = function (grunt) {
02.

grunt.initConfig({

03.

connect: { … } /* grunt-contrib-connect...
grunt-contrib-connect
01. server: { /* Подзадача */
02.

options: {

03.

keepalive: true, /* работать постоянно */

04.

...
Gruntfile.js
01. $ grunt connect:server
02. Running "connect:server" (connect) task
03. Waiting forever...
04. Started con...
public
01. $ cat public/index.html
02. Hello!

24
HTML
01. <!DOCTYPE html>
02. <html><head>
03.

<meta charset="utf-8">

04.

<link rel="stylesheet" href="/css/main.css"/>
...
Fest
$ npm install grunt-fest --save-dev

27
Fest
01. <fest:template xmlns:fest="http://fest.mail.ru"
02.

context_name="json">

03.

<div>

04.
05.

<h1>Epic Game</h1...
Fest
01. $ vim templates/main.xml
02. $ vim templates/scoreboard.xml
03. $ vim templates/game.xml

29
Gruntfile.js
01. grunt.initConfig({
02.

connect: { … } /* grunt-contrib-connect */

03.

fest: { … } /* grunt-fest */

04...
grunt-fest
01. templates: { /* Подзадача */
02.

files: [{

03.

expand: true,

04.

cwd: 'templates', /* исходная директо...
grunt-fest ’s options
01. template: function (data) { /* формат функции-шаблона */
02.

return grunt.template.process(

03...
Grunt
01. $ grunt fest
02. $ cat public/js/tmpl/main.js
03. $ cat public/js/tmpl/scoreboard.js
04. $ cat public/js/tmpl/ga...
Sweetness!
$ npm install grunt-contrib-watch --save-dev

34
Gruntfile.js
01. grunt.initConfig({
02.
03.

watch: { … } /* grunt-contrib-watch */
…

04. });
05. grunt.loadNpmTasks('gru...
grunt-contrib-watch
01. fest: { /* Подзадача */
02.

files: ['templates/*.xml'], /* следим за шаблонами */

03.

tasks: ['...
Gruntfile.js
01. grunt.initConfig({
02.

watch: { … } /* grunt-contrib-watch */

03.

connect: { … } /* grunt-contrib-conn...
grunt-contrib-connect
01. server: { /* Подзадача */
02.

options: {

03.

keepalive: true, /* работать постоянно */

04.

...
JavaScript
01. <script src="/js/lib/jquery.js"></script>
02. <script src="/js/tmpl/main.js"></script>
03. …
04. <script>
0...
JavaScript
01. function showMainScreen() { // Конструктор экрана "Главный"
02.

$page.html(mainTmpl()); // Рендерим шаблон...
JavaScript
01. function hideMainScreen() { // Деструктор экрана "Главный"
02.

// Удаляем установленные обработчики событи...
JavaScript
01. /* Конструктор экрана "Лучшие игроки" */
02. function showScoreboardScreen() {
03.

hideMainScreen();

04. ...
Домашнее задание
01. СФОРМИРОВАТЬ ИДЕЮ ИГРЫ
02. ОПРЕДЕЛИТЬСЯ С ГРУППОЙ И РОЛЯМИ В НЕЙ
03. САМОСТОЯТЕЛЬНО ИЗУЧИТЬ GRUNT, FE...
II. Архитектура
Immediately-Invoked Function
Expression, IIFE
01. var foo = 1;
02. (function () {
03.

var foo = 2;

04.

alert(foo);

05....
Модуль в JavaScript
01. var module = (function () {
02.

var name = 'A'; // приватная переменная

03.

return {

04.

say:...
Устройство веб-приложения
01. УРОВЕНЬ БИБЛИОТЕК.
02. УРОВЕНЬ ЯДРА ПРИЛОЖЕНИЯ.
03. УРОВЕНЬ МОДЕЛЕЙ.

50
“

Определение
Модуль — функционально законченный фрагмент программы,
оформленный в виде отдельного файла с исходным кодом...
Модуль веб-приложения
01. Состоит из HTML, CSS и JavaScript.
02. Характеризуется слабой связностью.

52
Кнопка тулбара
01. <div class="toolbar">
02.

<div class="button">Click Me</div>

03. </div>
04. .toolbar .button {
05.

b...
Кнопка тулбара
01. <div class="window">
02.

<div class="toolbar">

03.

<div class="button">Click Me</div>

04.

</div>

...
Кнопка тулбара
01. .toolbar .button {
02.

background: white;

03. }
04. .window .button {
05.

background: black;

06. }
...
Кнопка тулбара (БЭМ)
01. <div class="window">
02.

<div class="toolbar">

03.

<div class="toolbar__button">Click Me</div>...
Кнопка тулбара (БЭМ)
01. .toolbar__button {
02.

background: white;

03. }
04. .window__button {
05.

background: black;

...
БЭМ
01. toolbar // блок
02. toolbar__button // блок__элемент
03. toolbar_fixed // блок_модификатор
04. toolbar__button_siz...
Устройство веб-приложения
01. УРОВЕНЬ МОДУЛЕЙ. // AMD & RequireJS
02. УРОВЕНЬ ЯДРА ПРИЛОЖЕНИЯ. // Backbone
03. УРОВЕНЬ БИБ...
Модуль в JavaScript
01. var module = (function () {
02.

var name = 'A'; // приватная переменная

03.

return {

04.

say:...
Asynchronous Module Definition
01. define('A', function () {
02.

var name = 'A'; // приватная переменная

03.

return {

...
Asynchronous Module Definition
01. define('B', ['A'], function (A) {
02.

var name = 'B'; // приватная переменная

03.

re...
Backbone
01. МОДЕЛИ

// models

02. КОЛЛЕКЦИИ // collections
03. ПРЕДСТАВЛЕНИЯ

// view

73
Backbone.Events
01. var object = {};
02. _.extend(object, Backbone.Events);
03. object.on("alert", function (msg) {
04.

a...
Backbone.Model
01. var PlayerModel = Backbone.Model.extend({});
02. var player = new PlayerModel();
03. player.on('change:...
Backbone.View
01. var PlayerView = Backbone.View.extend({
02.

tagName: "li",

03.

className: "score__item",

04.

templa...
Backbone.View
01.

…

02.

events: {

03.

"click .button_delete": "destroy"

04.

},

05.

destroy: function () {},

06.
...
Backbone.View
01.

…

02.

initialize: function () {

03.

this.listenTo(this.model, "change", this.render);

04.

},

05....
Backbone.View
01. var playerView = new PlayerView({
02.

model: player,

03.

id: "player-" + player.id

04.

});

79
Uniform resource locator
scheme://domain:port/path?query_string#fragment_id

81
Событие hashchange
Backbone.history.start();

82
Backbone.Router
01. var Router = Backbone.Router.extend({
02.

routes: {

03.

'scoreboard': 'scoreboardAction',

04.

'ga...
Backbone.Router
01.

…

02.

gameAction: function () {},

03.

defaultActions: function () {}

04. });
05. new Router();

...
grunt-fest ’s options
01. template: function (data) {
02.

return grunt.template.process(

03.

/* 'var <%= name %>Tmpl = ...
Подлючение JavaScript файлов
01. <script src="/js/lib/jquery.js"></script>
02. <script src="/js/tmpl/main.js"></script>
03...
Подлючение JavaScript файлов
(RequireJS)
01. <script data-main="js/main"
02.

src="js/lib/require.js"></script>

88
js/main.js
01. …
02. define([
03.

'router'

04. ], function () {
05.

Backbone.history.start();

06. });

89
Подготовка
01. $ git remote add tp 
02. → https://github.com/eprev/frontend-stub.git
03. $ git fetch tp
04. $ git merge tp...
Домашнее задание
01. САМОСТОЯТЕЛЬНО ИЗУЧИТЬ UNDERSCORE, BACKBONE И REQUIREJS
02. ДОРАБОТАТЬ ПРОТОТИП ПО ТЗ

91
Frontend весна 2014 лекция 1
Frontend весна 2014 лекция 1
Frontend весна 2014 лекция 1
Frontend весна 2014 лекция 1
Frontend весна 2014 лекция 1
Frontend весна 2014 лекция 1
Frontend весна 2014 лекция 1
Frontend весна 2014 лекция 1
Frontend весна 2014 лекция 1
Frontend весна 2014 лекция 1
Frontend весна 2014 лекция 1
Frontend весна 2014 лекция 1
Frontend весна 2014 лекция 1
Frontend весна 2014 лекция 1
Frontend весна 2014 лекция 1
Frontend весна 2014 лекция 1
Frontend весна 2014 лекция 1
Frontend весна 2014 лекция 1
Frontend весна 2014 лекция 1
Upcoming SlideShare
Loading in...5
×

Frontend весна 2014 лекция 1

270

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
270
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Frontend весна 2014 лекция 1"

  1. 1. Фронтенд
  2. 2. I. Инструменты
  3. 3. Фронтенд 01. АНТОН ЕПРЕВ // a.eprev 02. ЕГОР ДЫДЫКИН // e.dydykin - @corp.mail.ru 03. ИВАН ЧАШКИН / // i.chashkin 3
  4. 4. Модули 01. АРХИТЕКТУРА // 2 СЗ + КР 02. DOM & AJAX // 3 СЗ + КР 03. ОТДЛАДКА И МОБИЛЬНЫЙ ВЕБ // 3 СЗ + КР 4
  5. 5. “ Определение Веб-приложение — клиент-серверное приложение, в котором клиентом выступает браузер, а сервером — веб-сервер. Логика вебприложения распределена между сервером и клиентом, хранение данных осуществляется, преимущественно, на сервере, обмен информацией происходит по сети. Википедия 5
  6. 6. HTTP, JavaScript, Backbone, DOM, Events, AJAX, WebSockets, Sass, Grunt…
  7. 7. Демо
  8. 8. Контрольные рубежи 01. РК №1 <= 20 02. РК №2 <= 60 03. РК №3 <= 100 8
  9. 9. Итоговая оценка 01. 0 <= "НЕУДОВЛЕТВОРИТЕЛЬНО" <= 59 02. 60 <= "УДОВЛЕТВОРИТЕЛЬНО" <= 74 03. 75 <= "ХОРОШО" <= 89 04. 90 <= "ОТЛИЧНО" <= 100 9
  10. 10. Критерии оценки 01. СООТВЕТСТВИЕ РЕЗУЛЬТАТА ПРЕДЪЯВЛЯЕМЫМ ТРЕБОВАНИЯМ 02. ОПТИМАЛЬНОСТЬ ПРЕДЛАГАЕМОГО РЕШЕНИЯ 03. ПРАКТИЧНОСТЬ РЕШЕНИЯ 04. КАЧЕСТВО ОФОРМЛЕНИЯ РЕЗУЛЬТАТОВ РАБОТЫ 05. ДОКАЗАТЕЛЬНОСТЬ АРГУМЕНТАЦИИ ПРИ ЗАЩИТЕ РАБОТЫ 10
  11. 11. tp.eprev.org/p/1
  12. 12. Single Page Application
  13. 13. Fest
  14. 14. Ресурсы 1.  http://nodejs.org 2.  https://npmjs.org 3.  http://gruntjs.com 4.  https://github.com/mailru/fest 17
  15. 15. Проектная работа
  16. 16. Подготовка 01. $ node -v 02. v0.10.12 19
  17. 17. Приступаем! 01. $ mkdir epicgame & cd epicgame 02. $ npm init 03. $ cat package.json 04. $ npm install grunt-cli -g 05. $ npm install grunt grunt-contrib-connect --save-dev 06. $ vim Gruntfile.js 20
  18. 18. Gruntfile.js 01. module.exports = function (grunt) { 02. grunt.initConfig({ 03. connect: { … } /* grunt-contrib-connect */ 04. }); 05. grunt.loadNpmTasks('grunt-contrib-connect'); 06. }; 21
  19. 19. grunt-contrib-connect 01. server: { /* Подзадача */ 02. options: { 03. keepalive: true, /* работать постоянно */ 04. port: 8000, /* номер порта */ 05. base: 'public' /* публичная директория */ 06. } 07. } 22
  20. 20. Gruntfile.js 01. $ grunt connect:server 02. Running "connect:server" (connect) task 03. Waiting forever... 04. Started connect web server on http://localhost:8000 23
  21. 21. public 01. $ cat public/index.html 02. Hello! 24
  22. 22. HTML 01. <!DOCTYPE html> 02. <html><head> 03. <meta charset="utf-8"> 04. <link rel="stylesheet" href="/css/main.css"/> 05. </head><body> 06. <div id="page"></div> 07. </body></html> 26
  23. 23. Fest $ npm install grunt-fest --save-dev 27
  24. 24. Fest 01. <fest:template xmlns:fest="http://fest.mail.ru" 02. context_name="json"> 03. <div> 04. 05. <h1>Epic Game</h1> </div> 06. </fest:template> 28
  25. 25. Fest 01. $ vim templates/main.xml 02. $ vim templates/scoreboard.xml 03. $ vim templates/game.xml 29
  26. 26. Gruntfile.js 01. grunt.initConfig({ 02. connect: { … } /* grunt-contrib-connect */ 03. fest: { … } /* grunt-fest */ 04. }); 05. grunt.loadNpmTasks('grunt-contrib-connect'); 06. grunt.loadNpmTasks('grunt-fest'); 30
  27. 27. grunt-fest 01. templates: { /* Подзадача */ 02. files: [{ 03. expand: true, 04. cwd: 'templates', /* исходная директория */ 05. src: '*.xml', /* имена шаблонов */ 06. dest: 'public/js/tmpl' /* результирующая директория */ 07. }], … } 31
  28. 28. grunt-fest ’s options 01. template: function (data) { /* формат функции-шаблона */ 02. return grunt.template.process( 03. /* присваиваем функцию-шаблон переменной */ 04. 'var <%= name %>Tmpl = <%= contents %> ;', 05. {data: data} 06. ); 07. } 32
  29. 29. Grunt 01. $ grunt fest 02. $ cat public/js/tmpl/main.js 03. $ cat public/js/tmpl/scoreboard.js 04. $ cat public/js/tmpl/game.js 33
  30. 30. Sweetness! $ npm install grunt-contrib-watch --save-dev 34
  31. 31. Gruntfile.js 01. grunt.initConfig({ 02. 03. watch: { … } /* grunt-contrib-watch */ … 04. }); 05. grunt.loadNpmTasks('grunt-contrib-watch'); 06. … 35
  32. 32. grunt-contrib-watch 01. fest: { /* Подзадача */ 02. files: ['templates/*.xml'], /* следим за шаблонами */ 03. tasks: ['fest'], /* перекомпилировать */ 04. options: { 05. 06. atBegin: true /* запустить задачу при старте */ } 07. } 36
  33. 33. Gruntfile.js 01. grunt.initConfig({ 02. watch: { … } /* grunt-contrib-watch */ 03. connect: { … } /* grunt-contrib-connect */ 04. … 05. }); 06. … 07. grunt.registerTask('default', ['connect', 'watch']); 37
  34. 34. grunt-contrib-connect 01. server: { /* Подзадача */ 02. options: { 03. keepalive: true, /* работать постоянно */ 04. port: 8000, /* номер порта */ 05. base: 'public' /* публичная директория */ 06. } 07. } 38
  35. 35. JavaScript 01. <script src="/js/lib/jquery.js"></script> 02. <script src="/js/tmpl/main.js"></script> 03. … 04. <script> 05. var $page = $('#page'); 06. $page.html(mainTmpl()); // Рендерим шаблон 07. </script> 40
  36. 36. JavaScript 01. function showMainScreen() { // Конструктор экрана "Главный" 02. $page.html(mainTmpl()); // Рендерим шаблон 03. // Инициализируем обработчики событий 04. $page.find('.js-scoreboard') 05. 06. .on('click', showScoreboardScreen); $page.find('.js-start-game').on('click', showGameScreen); 07. } 41
  37. 37. JavaScript 01. function hideMainScreen() { // Деструктор экрана "Главный" 02. // Удаляем установленные обработчики событий 03. $page.find('.js-scoreboard') 04. 05. .off('click', showScoreboardScreen); $page.find('.js-start-game').off('click', showGameScreen); 06. } 42
  38. 38. JavaScript 01. /* Конструктор экрана "Лучшие игроки" */ 02. function showScoreboardScreen() { 03. hideMainScreen(); 04. } 05. /* Деструктор экрана "Лучшие игроки" */ 06. function hideScoreboardScreen() {} 43
  39. 39. Домашнее задание 01. СФОРМИРОВАТЬ ИДЕЮ ИГРЫ 02. ОПРЕДЕЛИТЬСЯ С ГРУППОЙ И РОЛЯМИ В НЕЙ 03. САМОСТОЯТЕЛЬНО ИЗУЧИТЬ GRUNT, FEST И JQUERY 04. СОЗДАТЬ ПРОТОТИП ВЕБ-ПРИЛОЖЕНИЯ ПО ТЗ 44
  40. 40. II. Архитектура
  41. 41. Immediately-Invoked Function Expression, IIFE 01. var foo = 1; 02. (function () { 03. var foo = 2; 04. alert(foo); 05. })(); 06. alert(foo); 46
  42. 42. Модуль в JavaScript 01. var module = (function () { 02. var name = 'A'; // приватная переменная 03. return { 04. say: function () { // публичный метод 05. alert(name); 06. 07. 08. } }; })(); 47
  43. 43. Устройство веб-приложения 01. УРОВЕНЬ БИБЛИОТЕК. 02. УРОВЕНЬ ЯДРА ПРИЛОЖЕНИЯ. 03. УРОВЕНЬ МОДЕЛЕЙ. 50
  44. 44. “ Определение Модуль — функционально законченный фрагмент программы, оформленный в виде отдельного файла с исходным кодом… предназначенный для использования в других программах. Википедия 51
  45. 45. Модуль веб-приложения 01. Состоит из HTML, CSS и JavaScript. 02. Характеризуется слабой связностью. 52
  46. 46. Кнопка тулбара 01. <div class="toolbar"> 02. <div class="button">Click Me</div> 03. </div> 04. .toolbar .button { 05. background: white; 06. } 61
  47. 47. Кнопка тулбара 01. <div class="window"> 02. <div class="toolbar"> 03. <div class="button">Click Me</div> 04. </div> 05. <div class="button">Submit</div> 06. </div> 62
  48. 48. Кнопка тулбара 01. .toolbar .button { 02. background: white; 03. } 04. .window .button { 05. background: black; 06. } 63
  49. 49. Кнопка тулбара (БЭМ) 01. <div class="window"> 02. <div class="toolbar"> 03. <div class="toolbar__button">Click Me</div> 04. </div> 05. <div class="window__button">Submit</div> 06. </div> 64
  50. 50. Кнопка тулбара (БЭМ) 01. .toolbar__button { 02. background: white; 03. } 04. .window__button { 05. background: black; 06. } 65
  51. 51. БЭМ 01. toolbar // блок 02. toolbar__button // блок__элемент 03. toolbar_fixed // блок_модификатор 04. toolbar__button_size_xl // блок__элемент_модификатор_значение http://ru.bem.info 66
  52. 52. Устройство веб-приложения 01. УРОВЕНЬ МОДУЛЕЙ. // AMD & RequireJS 02. УРОВЕНЬ ЯДРА ПРИЛОЖЕНИЯ. // Backbone 03. УРОВЕНЬ БИБЛИОТЕК. // jQuery & Underscore 67
  53. 53. Модуль в JavaScript 01. var module = (function () { 02. var name = 'A'; // приватная переменная 03. return { 04. say: function () { // публичный метод 05. alert(name); 06. 07. 08. } }; })(); 69
  54. 54. Asynchronous Module Definition 01. define('A', function () { 02. var name = 'A'; // приватная переменная 03. return { 04. say: function () { // публичный метод 05. alert(name); 06. 07. 08. }); } }; 70
  55. 55. Asynchronous Module Definition 01. define('B', ['A'], function (A) { 02. var name = 'B'; // приватная переменная 03. return { 04. say: function () { // публичный метод 05. A.say(); // вызов публичного метода модуля A 06. alert(name); 07. 08. } … 71
  56. 56. Backbone 01. МОДЕЛИ // models 02. КОЛЛЕКЦИИ // collections 03. ПРЕДСТАВЛЕНИЯ // view 73
  57. 57. Backbone.Events 01. var object = {}; 02. _.extend(object, Backbone.Events); 03. object.on("alert", function (msg) { 04. alert("Triggered " + msg); 05. }); 06. object.trigger("alert", "an event"); 74
  58. 58. Backbone.Model 01. var PlayerModel = Backbone.Model.extend({}); 02. var player = new PlayerModel(); 03. player.on('change:name', function(model, name) { 04. alert('Player name is ' + name); 05. }); 06. player.set({name: 'Mark'}); 75
  59. 59. Backbone.View 01. var PlayerView = Backbone.View.extend({ 02. tagName: "li", 03. className: "score__item", 04. template: fest['player'], 05. … 76
  60. 60. Backbone.View 01. … 02. events: { 03. "click .button_delete": "destroy" 04. }, 05. destroy: function () {}, 06. … 77
  61. 61. Backbone.View 01. … 02. initialize: function () { 03. this.listenTo(this.model, "change", this.render); 04. }, 05. render: function () { 06. 07. 08. }); this.$el.html(this.template(this.model.attributes)); } 78
  62. 62. Backbone.View 01. var playerView = new PlayerView({ 02. model: player, 03. id: "player-" + player.id 04. }); 79
  63. 63. Uniform resource locator scheme://domain:port/path?query_string#fragment_id 81
  64. 64. Событие hashchange Backbone.history.start(); 82
  65. 65. Backbone.Router 01. var Router = Backbone.Router.extend({ 02. routes: { 03. 'scoreboard': 'scoreboardAction', 04. 'game' : 'gameAction', 05. '*default' : 'defaultActions' 06. }, 07. scoreboardAction: function () {}, 08. … 83
  66. 66. Backbone.Router 01. … 02. gameAction: function () {}, 03. defaultActions: function () {} 04. }); 05. new Router(); 84
  67. 67. grunt-fest ’s options 01. template: function (data) { 02. return grunt.template.process( 03. /* 'var <%= name %>Tmpl = <%= contents %> ;' */ 04. 'define(function () { return <%= contents %> ; });', 05. {data: data} 06. ); 07. } 85
  68. 68. Подлючение JavaScript файлов 01. <script src="/js/lib/jquery.js"></script> 02. <script src="/js/tmpl/main.js"></script> 03. <script src="/js/tmpl/scoreboard.js"></script> 04. <script src="/js/tmpl/game.js"></script> 87
  69. 69. Подлючение JavaScript файлов (RequireJS) 01. <script data-main="js/main" 02. src="js/lib/require.js"></script> 88
  70. 70. js/main.js 01. … 02. define([ 03. 'router' 04. ], function () { 05. Backbone.history.start(); 06. }); 89
  71. 71. Подготовка 01. $ git remote add tp 02. → https://github.com/eprev/frontend-stub.git 03. $ git fetch tp 04. $ git merge tp/v2 90
  72. 72. Домашнее задание 01. САМОСТОЯТЕЛЬНО ИЗУЧИТЬ UNDERSCORE, BACKBONE И REQUIREJS 02. ДОРАБОТАТЬ ПРОТОТИП ПО ТЗ 91
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×