Downloaded 10 times
![grunt-fest
01. templates: { /* Подзадача */
02.
files: [{
03.
expand: true,
04.
cwd: 'templates', /* исходная директория */
05.
src: '*.xml', /* имена шаблонов */
06.
dest: 'public/js/tmpl' /* результирующая директория */
07.
}], … }
31](https://image.slidesharecdn.com/frontend-1-140215172317-phpapp01/85/Frontend-2014-1-31-320.jpg)
![grunt-contrib-watch
01. fest: { /* Подзадача */
02.
files: ['templates/*.xml'], /* следим за шаблонами */
03.
tasks: ['fest'], /* перекомпилировать */
04.
options: {
05.
06.
atBegin: true /* запустить задачу при старте */
}
07. }
36](https://image.slidesharecdn.com/frontend-1-140215172317-phpapp01/85/Frontend-2014-1-36-320.jpg)
![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](https://image.slidesharecdn.com/frontend-1-140215172317-phpapp01/85/Frontend-2014-1-37-320.jpg)
![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](https://image.slidesharecdn.com/frontend-1-140215172317-phpapp01/85/Frontend-2014-1-71-320.jpg)
![Backbone.View
01. var PlayerView = Backbone.View.extend({
02.
tagName: "li",
03.
className: "score__item",
04.
template: fest['player'],
05.
…
76](https://image.slidesharecdn.com/frontend-1-140215172317-phpapp01/85/Frontend-2014-1-76-320.jpg)
![js/main.js
01. …
02. define([
03.
'router'
04. ], function () {
05.
Backbone.history.start();
06. });
89](https://image.slidesharecdn.com/frontend-1-140215172317-phpapp01/85/Frontend-2014-1-89-320.jpg)
More Related Content
Similar to Frontend весна 2014 лекция 1
Frontend весна 2014 лекция 1
- 1.
- 2.
- 3. Фронтенд 01. АНТОН ЕПРЕВ //a.eprev 02. ЕГОР ДЫДЫКИН // e.dydykin - @corp.mail.ru 03. ИВАН ЧАШКИН / // i.chashkin 3
- 4. Модули 01. АРХИТЕКТУРА //2 СЗ + КР 02. DOM & AJAX // 3 СЗ + КР 03. ОТДЛАДКА И МОБИЛЬНЫЙ ВЕБ // 3 СЗ + КР 4
- 5. “ Определение Веб-приложение — клиент-серверноеприложение, в котором клиентом выступает браузер, а сервером — веб-сервер. Логика вебприложения распределена между сервером и клиентом, хранение данных осуществляется, преимущественно, на сервере, обмен информацией происходит по сети. Википедия 5
- 6. HTTP, JavaScript, Backbone, DOM, Events,AJAX, WebSockets, Sass, Grunt…
- 7.
- 8. Контрольные рубежи 01. РК№1 <= 20 02. РК №2 <= 60 03. РК №3 <= 100 8
- 9. Итоговая оценка 01. 0<= "НЕУДОВЛЕТВОРИТЕЛЬНО" <= 59 02. 60 <= "УДОВЛЕТВОРИТЕЛЬНО" <= 74 03. 75 <= "ХОРОШО" <= 89 04. 90 <= "ОТЛИЧНО" <= 100 9
- 10. Критерии оценки 01. СООТВЕТСТВИЕРЕЗУЛЬТАТА ПРЕДЪЯВЛЯЕМЫМ ТРЕБОВАНИЯМ 02. ОПТИМАЛЬНОСТЬ ПРЕДЛАГАЕМОГО РЕШЕНИЯ 03. ПРАКТИЧНОСТЬ РЕШЕНИЯ 04. КАЧЕСТВО ОФОРМЛЕНИЯ РЕЗУЛЬТАТОВ РАБОТЫ 05. ДОКАЗАТЕЛЬНОСТЬ АРГУМЕНТАЦИИ ПРИ ЗАЩИТЕ РАБОТЫ 10
- 11.
- 15.
- 16.
- 17. Ресурсы 1. http://nodejs.org 2. https://npmjs.org 3. http://gruntjs.com 4. https://github.com/mailru/fest 17
- 18.
- 19. Подготовка 01. $ node-v 02. v0.10.12 19
- 20. Приступаем! 01. $ mkdirepicgame & 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
- 21. Gruntfile.js 01. module.exports =function (grunt) { 02. grunt.initConfig({ 03. connect: { … } /* grunt-contrib-connect */ 04. }); 05. grunt.loadNpmTasks('grunt-contrib-connect'); 06. }; 21
- 22. grunt-contrib-connect 01. server: {/* Подзадача */ 02. options: { 03. keepalive: true, /* работать постоянно */ 04. port: 8000, /* номер порта */ 05. base: 'public' /* публичная директория */ 06. } 07. } 22
- 23. Gruntfile.js 01. $ gruntconnect:server 02. Running "connect:server" (connect) task 03. Waiting forever... 04. Started connect web server on http://localhost:8000 23
- 24. public 01. $ catpublic/index.html 02. Hello! 24
- 26. 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
- 27. Fest $ npm installgrunt-fest --save-dev 27
- 28. Fest 01. <fest:template xmlns:fest="http://fest.mail.ru" 02. context_name="json"> 03. <div> 04. 05. <h1>EpicGame</h1> </div> 06. </fest:template> 28
- 29. Fest 01. $ vimtemplates/main.xml 02. $ vim templates/scoreboard.xml 03. $ vim templates/game.xml 29
- 30. 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
- 31. grunt-fest 01. templates: {/* Подзадача */ 02. files: [{ 03. expand: true, 04. cwd: 'templates', /* исходная директория */ 05. src: '*.xml', /* имена шаблонов */ 06. dest: 'public/js/tmpl' /* результирующая директория */ 07. }], … } 31
- 32. 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
- 33. Grunt 01. $ gruntfest 02. $ cat public/js/tmpl/main.js 03. $ cat public/js/tmpl/scoreboard.js 04. $ cat public/js/tmpl/game.js 33
- 34. Sweetness! $ npm installgrunt-contrib-watch --save-dev 34
- 35. Gruntfile.js 01. grunt.initConfig({ 02. 03. watch: {… } /* grunt-contrib-watch */ … 04. }); 05. grunt.loadNpmTasks('grunt-contrib-watch'); 06. … 35
- 36. grunt-contrib-watch 01. fest: {/* Подзадача */ 02. files: ['templates/*.xml'], /* следим за шаблонами */ 03. tasks: ['fest'], /* перекомпилировать */ 04. options: { 05. 06. atBegin: true /* запустить задачу при старте */ } 07. } 36
- 37. 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
- 38. grunt-contrib-connect 01. server: {/* Подзадача */ 02. options: { 03. keepalive: true, /* работать постоянно */ 04. port: 8000, /* номер порта */ 05. base: 'public' /* публичная директория */ 06. } 07. } 38
- 40. 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
- 41. 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
- 42. 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
- 43. JavaScript 01. /* Конструкторэкрана "Лучшие игроки" */ 02. function showScoreboardScreen() { 03. hideMainScreen(); 04. } 05. /* Деструктор экрана "Лучшие игроки" */ 06. function hideScoreboardScreen() {} 43
- 44. Домашнее задание 01. СФОРМИРОВАТЬИДЕЮ ИГРЫ 02. ОПРЕДЕЛИТЬСЯ С ГРУППОЙ И РОЛЯМИ В НЕЙ 03. САМОСТОЯТЕЛЬНО ИЗУЧИТЬ GRUNT, FEST И JQUERY 04. СОЗДАТЬ ПРОТОТИП ВЕБ-ПРИЛОЖЕНИЯ ПО ТЗ 44
- 45.
- 46. Immediately-Invoked Function Expression, IIFE 01.var foo = 1; 02. (function () { 03. var foo = 2; 04. alert(foo); 05. })(); 06. alert(foo); 46
- 47. Модуль в JavaScript 01.var module = (function () { 02. var name = 'A'; // приватная переменная 03. return { 04. say: function () { // публичный метод 05. alert(name); 06. 07. 08. } }; })(); 47
- 50. Устройство веб-приложения 01. УРОВЕНЬБИБЛИОТЕК. 02. УРОВЕНЬ ЯДРА ПРИЛОЖЕНИЯ. 03. УРОВЕНЬ МОДЕЛЕЙ. 50
- 51. “ Определение Модуль — функциональнозаконченный фрагмент программы, оформленный в виде отдельного файла с исходным кодом… предназначенный для использования в других программах. Википедия 51
- 52. Модуль веб-приложения 01. Состоитиз HTML, CSS и JavaScript. 02. Характеризуется слабой связностью. 52
- 61. Кнопка тулбара 01. <divclass="toolbar"> 02. <div class="button">Click Me</div> 03. </div> 04. .toolbar .button { 05. background: white; 06. } 61
- 62. Кнопка тулбара 01. <divclass="window"> 02. <div class="toolbar"> 03. <div class="button">Click Me</div> 04. </div> 05. <div class="button">Submit</div> 06. </div> 62
- 63. Кнопка тулбара 01. .toolbar.button { 02. background: white; 03. } 04. .window .button { 05. background: black; 06. } 63
- 64. Кнопка тулбара (БЭМ) 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
- 65. Кнопка тулбара (БЭМ) 01..toolbar__button { 02. background: white; 03. } 04. .window__button { 05. background: black; 06. } 65
- 66. БЭМ 01. toolbar //блок 02. toolbar__button // блок__элемент 03. toolbar_fixed // блок_модификатор 04. toolbar__button_size_xl // блок__элемент_модификатор_значение http://ru.bem.info 66
- 67. Устройство веб-приложения 01. УРОВЕНЬМОДУЛЕЙ. // AMD & RequireJS 02. УРОВЕНЬ ЯДРА ПРИЛОЖЕНИЯ. // Backbone 03. УРОВЕНЬ БИБЛИОТЕК. // jQuery & Underscore 67
- 69. Модуль в JavaScript 01.var module = (function () { 02. var name = 'A'; // приватная переменная 03. return { 04. say: function () { // публичный метод 05. alert(name); 06. 07. 08. } }; })(); 69
- 70. Asynchronous Module Definition 01.define('A', function () { 02. var name = 'A'; // приватная переменная 03. return { 04. say: function () { // публичный метод 05. alert(name); 06. 07. 08. }); } }; 70
- 71. 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
- 73. Backbone 01. МОДЕЛИ // models 02.КОЛЛЕКЦИИ // collections 03. ПРЕДСТАВЛЕНИЯ // view 73
- 74. 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
- 75. 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
- 76. Backbone.View 01. var PlayerView= Backbone.View.extend({ 02. tagName: "li", 03. className: "score__item", 04. template: fest['player'], 05. … 76
- 77. Backbone.View 01. … 02. events: { 03. "click .button_delete":"destroy" 04. }, 05. destroy: function () {}, 06. … 77
- 78. 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
- 79. Backbone.View 01. var playerView= new PlayerView({ 02. model: player, 03. id: "player-" + player.id 04. }); 79
- 81.
- 82.
- 83. 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
- 84. Backbone.Router 01. … 02. gameAction: function (){}, 03. defaultActions: function () {} 04. }); 05. new Router(); 84
- 85. 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
- 87. Подлючение 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
- 88. Подлючение JavaScript файлов (RequireJS) 01.<script data-main="js/main" 02. src="js/lib/require.js"></script> 88
- 89. js/main.js 01. … 02. define([ 03. 'router' 04.], function () { 05. Backbone.history.start(); 06. }); 89
- 90. Подготовка 01. $ gitremote add tp 02. → https://github.com/eprev/frontend-stub.git 03. $ git fetch tp 04. $ git merge tp/v2 90
- 91. Домашнее задание 01. САМОСТОЯТЕЛЬНОИЗУЧИТЬ UNDERSCORE, BACKBONE И REQUIREJS 02. ДОРАБОТАТЬ ПРОТОТИП ПО ТЗ 91