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

Фронтенд
01. АНТОН ЕПРЕВ

// a.eprev

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

- @corp.mail.ru

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

/

// i.chashkin

3

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

4

“

Определение
Веб-приложение — клиент-серверное приложение, в котором
клиентом выступает браузер, а сервером — веб-сервер. Логика вебприложения распределена между сервером и клиентом, хранение
данных осуществляется, преимущественно, на сервере, обмен
информацией происходит по сети.
Википедия

5

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 <= "ОТЛИЧНО" <= 100

9

Критерии оценки
01. СООТВЕТСТВИЕ РЕЗУЛЬТАТА ПРЕДЪЯВЛЯЕМЫМ ТРЕБОВАНИЯМ
02. ОПТИМАЛЬНОСТЬ ПРЕДЛАГАЕМОГО РЕШЕНИЯ
03. ПРАКТИЧНОСТЬ РЕШЕНИЯ
04. КАЧЕСТВО ОФОРМЛЕНИЯ РЕЗУЛЬТАТОВ РАБОТЫ
05. ДОКАЗАТЕЛЬНОСТЬ АРГУМЕНТАЦИИ ПРИ ЗАЩИТЕ РАБОТЫ

10

Ресурсы
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. $ npm install grunt grunt-contrib-connect --save-dev
06. $ vim Gruntfile.js

20

Gruntfile.js
01. module.exports = function (grunt) {
02.

grunt.initConfig({

03.

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

04.

});

05.

grunt.loadNpmTasks('grunt-contrib-connect');

06. };

21

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

options: {

03.

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

04.

port: 8000, /* номер порта */

05.

base: 'public' /* публичная директория */

06.

}

07. }
22

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

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"/>

05. </head><body>
06.

<div id="page"></div>

07. </body></html>
26

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>
</div>

06. </fest:template>

28

Fest
01. $ vim templates/main.xml
02. $ vim templates/scoreboard.xml
03. $ vim templates/game.xml

29

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


03.

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

04. });
05. grunt.loadNpmTasks('grunt-contrib-connect');
06. grunt.loadNpmTasks('grunt-fest');

30

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

files: [{

03.

expand: true,

04.

cwd: 'templates', /* исходная директория */

05.

src: '*.xml', /* имена шаблонов */

06.

dest: 'public/js/tmpl' /* результирующая директория */

07.

}], … }
31

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

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

Sweetness!
$ npm install grunt-contrib-watch --save-dev

34

Gruntfile.js
02.
03.

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

04. });
05. grunt.loadNpmTasks('grunt-contrib-watch');
06. …

35

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

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

03.

tasks: ['fest'], /* перекомпилировать */

04.

options: {

05.
06.

atBegin: true /* запустить задачу при старте */
}

07. }
36

Gruntfile.js
02.

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

03.


04.

…

05. });
06. …
07. grunt.registerTask('default', ['connect', 'watch']);
37

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

options: {

03.

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

04.

port: 8000, /* номер порта */

05.

base: 'public' /* публичная директория */

06.

}

07. }
38

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

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

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

JavaScript
01. /* Конструктор экрана "Лучшие игроки" */
02. function showScoreboardScreen() {
03.

hideMainScreen();

04. }
05. /* Деструктор экрана "Лучшие игроки" */
06. function hideScoreboardScreen() {}

43

Домашнее задание
01. СФОРМИРОВАТЬ ИДЕЮ ИГРЫ
02. ОПРЕДЕЛИТЬСЯ С ГРУППОЙ И РОЛЯМИ В НЕЙ
03. САМОСТОЯТЕЛЬНО ИЗУЧИТЬ GRUNT, FEST И JQUERY
04. СОЗДАТЬ ПРОТОТИП ВЕБ-ПРИЛОЖЕНИЯ ПО ТЗ

44

Immediately-Invoked Function
Expression, IIFE
01. var foo = 1;
02. (function () {
03.

var foo = 2;

04.

alert(foo);

05. })();
06. alert(foo);
46

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

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

03.

return {

04.

say: function () { // публичный метод

05.

alert(name);

06.
07.
08.

}
};
})();

47

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

50

“

Определение
Модуль — функционально законченный фрагмент программы,
оформленный в виде отдельного файла с исходным кодом…
предназначенный для использования в других программах.
Википедия

51

Модуль веб-приложения
01. Состоит из HTML, CSS и JavaScript.
02. Характеризуется слабой связностью.

52

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

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

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

background: white;

06. }

61

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

01. .toolbar .button {
02.

background: white;

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

background: black;

06. }

63

Кнопка тулбара (БЭМ)
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

Кнопка тулбара (БЭМ)
01. .toolbar__button {
02.

background: white;

03. }
04. .window__button {
05.

background: black;

06. }

65

БЭМ
01. toolbar // блок
02. toolbar__button // блок__элемент
03. toolbar_fixed // блок_модификатор
04. toolbar__button_size_xl // блок__элемент_модификатор_значение

http://ru.bem.info

66

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

67

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


03.

return {

04.


05.

alert(name);

06.
07.
08.

}
};
})();

69

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


03.

return {

04.


05.

alert(name);

06.
07.
08. });

}
};
70

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

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

03.

return {

04.


05.

A.say(); // вызов публичного метода модуля A

06.

alert(name);

07.
08.

}
…

71

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.

alert("Triggered " + msg);

05. });
06. object.trigger("alert", "an event");

74

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

Backbone.View
01. var PlayerView = Backbone.View.extend({
02.

tagName: "li",

03.

className: "score__item",

04.

template: fest['player'],

05.

…

76

Backbone.View
01.

…

02.

events: {

03.

"click .button_delete": "destroy"

04.

},

05.

destroy: function () {},

06.

…

77

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

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.

'game'

: 'gameAction',

05.

'*default'

: 'defaultActions'

06.

},

07.

scoreboardAction: function () {},

08.

…

83

Backbone.Router
01.

…

02.

gameAction: function () {},

03.

defaultActions: function () {}

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

84

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

Подлючение 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

Подлючение 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/v2

90

Домашнее задание
01. САМОСТОЯТЕЛЬНО ИЗУЧИТЬ UNDERSCORE, BACKBONE И REQUIREJS
02. ДОРАБОТАТЬ ПРОТОТИП ПО ТЗ

91

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

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

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

Similaire à Frontend весна 2014 лекция 1 (20)

Plus de Technopark

Plus de Technopark (20)

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