Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

503 views

Published on

Published in: Education
  • Be the first to comment

  • Be the first to like this

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

×