React со скоростью света: не совсем обычный серверный рендеринг

Save this PDF as:
 WORD  PNG  TXT  JPG

Размер: px
Начинать показ со страницы:

Download "React со скоростью света: не совсем обычный серверный рендеринг"

Транскрипт

1 React со скоростью света: не совсем обычный серверный рендеринг Тимофей Чаптыков

2 2

3 Сейчас быстро запилим Виртуальная DOM, декларативный рендеринг Архитектура с однонаправленным потоком данных Высокий «Developer experience» 3

4 Первое, что приходит в голову 1. Всё выбросить и переписать. 2. Использовать для рендеринга на сервере Node.js 4

5 Большая база кода Шаблоны: LOC Стили: LOC 5

6 Нагрузка MAU отправленных сообщений в день раз за 5 минут открывается раздел сообщений 6

7 Нельзя делать хуже

8 Текущий технологический стек 8

9 Текущий технологический стек Сервер: шаблоны на kphp 9

10 KittenPHP KittenPHP (или kphp) транслятор PHP подобного кода в C++. 10

11 Пример шаблона на kphp function simsimplelink($href, $content) { return <<<HTML <a href="{$href}" class="_im_header_link"> {$content} </a> HTML; } 11

12 Текущий технологический стек Сервер: шаблоны на kphp Клиент: Каждый раздел отдельное клиентское приложение Переиспользование серверных шаблонов Императивная работа с DOM 12

13 Модный технологический стек 13

14 14

15 ReactDOMServer.renderToString()

16 16

17 Медленно

18 Ускорение серверного рендеринга React приложений 18

19 Speed up Server Side Rendering 1. Node.js c NODE_ENV=production 2. Минифицированная версия React из react/dist/react.min 3. Babel-трансформации constant-elements и inline-elements 4. ES6 классы и Stateless components вместо React.createClass() 5. Streaming 6. Cache 19

20 Speed up Server Side Rendering 1. Node.js c NODE_ENV=production 2. Минифицированная версия React из react/dist/react.min 3. Babel-трансформации constant-elements и inline-elements 4. ES6 классы и Stateless components вместо React.createClass() 5. Streaming 6. Cache 20

21 Speed up Server Side Rendering by Sasha Aickin Reactjs - Speed up Server Side Rendering - Sasha Aickin 21

22 1000 ms 60 ms

23 А если нужно быстрее?

24 А что, если 24

25 Оставить на сервере строковую шаблонизацию?

26 01. <ul classname={cls}> 01. <ul class="{{cls}}"> 02. {elements.map(item => ( 02. {{#each elements}} 03. <li> 03. <li> 04. <Item item={item} /> 04. {{> Item item}} 05. </li> 05. </li> 06. ))} 06. {{/each}} 07. </ul> 07. </ul>

27 01. <ul classname={cls}> 01. <ul class="{{cls}}"> 02. {elements.map(item => ( 02. {{#each elements}} 03. <li> 03. <li> 04. <Item item={item} /> 04. {{> Item item}} 05. </li> 05. </li> 06. ))} 06. {{/each}} 07. </ul> 07. </ul>

28 01. <ul classname={cls}> 01. <ul class="{{cls}}"> 02. {elements.map(item => ( 02. {{#each elements}} 03. <li> 03. <li> 04. <Item item={item} /> 04. {{> Item item}} 05. </li> 05. </li> 06. ))} 06. {{/each}} 07. </ul> 07. </ul>

29 01. <ul classname={cls}> 01. <ul class="{{cls}}"> 02. {elements.map(item => ( 02. {{#each elements}} 03. <li> 03. <li> 04. <Item item={item} /> 04. {{> Item item}} 05. </li> 05. </li> 06. ))} 06. {{/each}} 07. </ul> 07. </ul>

30 Почти то же самое, но

31 Нельзя вот так 01. <div{{#if cls}} class="{{cls}}"> {{else}} > {{/if}} 02. Some block content 03. </div> 31

32 А вот так уже можно 01. <div {{#if cls}} class="{{cls}}" {{/if}}> 02. Some block content 03. </div> 32

33 Нельзя произвольный JS 01. <div> 02. Sum: {arr.reduce((s, a) => (s + a), 0)} 03. </div> 33

34 Нужно готовить данные для всего приложения перед рендером

35 Реализация 35

36 36

37 До: 01. <ul class="{{cls}}"> После: 01. h('ul', { classname: cls }, 02. {{#each elements}} 02. elements.map(ctx => ( 03. <li> 03. h('li', null, 04. {{> Item item}} 04. h(item, ctx.item) 05. </li> 05. ) 06. {{/each}} 06. )) 07. </ul> 07. )

38 Что парсит Handlebars 01. <ul class="{{cls}}"> {{#each elements}} <li> {{item}} </li> {{/each}} 07. </ul> 38

39 Нам нужно парсить всё

40 01. { tag: "h1", attributes: [], children: [ { type: "text", value: "Hello, " }, { type: "handlebars", value: "name" } ] 08. } 40

41 Написание парсера 41

42 42

43 PEG.js Генерирует парсеры по описанной грамматике. 43

44 handlebars ex Парсит handlebars-шаблон в AST с учетом HTML-тегов, атрибутов и пр. 44

45 bluehtml Парсит handlebars-шаблоны и умеет конвертировать полученное AST в hscript для библиотеки Virtual DOM Имеет адаптер для React 45

46 BlueHTML предназначен для переиспользования legacy шаблонов на Handlebars

47 Необязательно React Preact Virtual DOM Inferno 47

48 Webpack лоадер 01. class Foo extends React.Component { render() { } return require('./foo.html')(this.props); 05. } 48

49 Переиспользование DOM 49

50 Если использовать текущую схему, приложение на клиенте будет полностью перерисовываться

51 Переиспользование DOM в React

52 Компонент 01. class Foo extends React.Component { render() const name = 'World'; return <h1>hello, {name}</h1>; } 06. } 52

53 rendertostring 01. <h data-reactroot="" data-reactid="1" data-react-checksum=" "> <!-- react-text: 2 -->Hello, <!-- /react-text --> <!-- react-text: 3 -->World<!-- /react-text --> 07. </h1> 53

54 reactroot 01. <h data-reactroot="" data-reactid="1" data-react-checksum=" "> <!-- react-text: 2 -->Hello, <!-- /react-text --> <!-- react-text: 3 -->World<!-- /react-text --> 07. </h1> 54

55 react checksum 01. <h data-reactroot="" data-reactid="1" data-react-checksum=" "> <!-- react-text: 2 -->Hello, <!-- /react-text --> <!-- react-text: 3 -->World<!-- /react-text --> 07. </h1> 55

56 react checksum //./src/renderers/dom/stack/server/reactmarkupchecksum.js var checksum = adler32(markup); 56

57 01. <h1 reactid data-reactroot="" data-reactid="1" data-react-checksum=" "> <!-- react-text: 2 -->Hello, <!-- /react-text --> <!-- react-text: 3 -->World<!-- /react-text --> 07. </h1> 57

58 reactid React.createElement('h1', {}, ['Hello, ', name]); //

59 59

60 Итоги 60

61 Список из элементов React.renderToString() React.renderToString() optimized Handlebars.php PHP precompiled 1096 ms 800 ms 880 ms 126 ms 61

62 62

63 Проблемы Сгенерированные компоненты не всегда можно полноценно использовать на клиенте 63

64 Не всё поддерживается Partials With Lookup helper Log helper BlueHTML TODO list 64

65 Все атрибуты приводятся к строке 01. obj['onclick'] = ''; 02. obj['onclick'] += escape(ctx.onclick); 65

66 Проблемы Генерация Virtual DOM не всегда позволяет полноценно использовать компоненты на клиенте Зависимость от версии React 66

67 Обновление React заставит заново попадать в каждый пробел

68 Планы 68

69 Планы Расширить поддерживаемый синтаксис исходных шаблонов Реализовать генерацию kphp-шаблонов Улучшить генерацию клиентских компонентов Заменить React на аналог? 69

70 Зачем это может пригодиться вам Возможность переиспользовать legacy-шаблоны на клиенте с Virtual DOM или React Универсальные шаблоны, которые можно рендерить на сервере строковым шаблонизатором 70

71 Зачем это может пригодиться вам Возможность переиспользовать legacy-шаблоны на клиенте с Virtual DOM или React Универсальные шаблоны, которые можно рендерить на сервере строковым шаблонизатором только для отчаянных 71

72 Зачем это нам Декларативный рендеринг, возможность использовать библиотеки с Virtual DOM на клиенте, используя серверные шаблоны. Сохраняем возможность использовать строковую шаблонизацию в разделах, которые не требуют сложного фронтенда 72

73 73

74 vk.cc/6inawe

75 Тимофей Чаптыков

Про шаблонизаторы вообще и BEMHTML в частности. Сергей Бережной руководитель отдела разработки поисковых интерфейсов

Про шаблонизаторы вообще и BEMHTML в частности. Сергей Бережной руководитель отдела разработки поисковых интерфейсов Про шаблонизаторы вообще и BEMHTML в частности Сергей Бережной руководитель отдела разработки поисковых интерфейсов Я.Субботник, Москва, 8 сентября 2012 года про шаблонизаторы вообще и BEMHTML в частности

Подробнее

CSS-в-JS, HTML-в-JS, ВСЁ-в-JS

CSS-в-JS, HTML-в-JS, ВСЁ-в-JS CSS-в-JS, HTML-в-JS, ВСЁ-в-JS Все гораздо проще, когда всё вокруг JavaScript Алексей Иванов, Злые Марсиане Чем занимаются Марсиане 2 О чем этот доклад 3 Часть 1. Серверные приложения 4 Сокращаем CSS-классы

Подробнее

Быстрый рендеринг с DOM шаблонизаторами. Каплуновский

Быстрый рендеринг с DOM шаблонизаторами. Каплуновский Быстрый рендеринг с DOM шаблонизаторами Каплуновский Борис @bskaplou bk@aviasales.ru Agenda Правила игры Типы шаблонизаторов Минусы AngularJS/ReactJS Плюсы менее известных библиотек Шаблонизатор temple

Подробнее

tuchk4 CSS in JS ВАЛЕРИЙ Сорокобатько

tuchk4 CSS in JS ВАЛЕРИЙ Сорокобатько tuchk4 CSS in JS ВАЛЕРИЙ Сорокобатько v.sorokobatko@gmail.com tuchk4 ВАЛЕРИЙ СОРОКОБАТЬКО Create-react-app контрибьютор автор Awesome-create-react-app автор React Storybook README Addon CSS in JS 3 ПЛАН

Подробнее

JSX? Пфф! Владимир Гриненко WSD, Москва, 28 января 2017

JSX? Пфф! Владимир Гриненко WSD, Москва, 28 января 2017 JSX? Пфф! Владимир Гриненко WSD, Москва, 28 января 2017 Я не умею в React React Чего не хватает Модификаторов Уровней переопределения (для любителей) Предметной области БЭМ 6 bem-react-core Что это Обертка

Подробнее

Программа курса «Базовый JavaScript»

Программа курса «Базовый JavaScript» Программа курса «Базовый JavaScript» Знакомство с языком Что умеет JavaScript и почему он так популярен? История языка Выполнение в браузере Особенности браузеров и движков Выполнение на других платформах

Подробнее

DOM-шаблонизаторы не только «быстро»

DOM-шаблонизаторы не только «быстро» DOM-шаблонизаторы не только «быстро» Роман Дворнов Ostrovok.ru Июнь 2014 О себе Работаю в ostrovok.ru Автор basis.js 2 Сегодня мы создаем динамические интерфейсы 3 Динамические интерфейсы = работа с DOM

Подробнее

Разработка веб-приложений на языке PHP

Разработка веб-приложений на языке PHP Разработка веб-приложений на языке PHP levelup.dp.ua Мы предлагаем несколько версий обучения наиболее популярной технологии в современном программировании. Версии отличаются между собой объемом материала,

Подробнее

Kotlin это. Остров в Финском заливе: 3 / 183

Kotlin это. Остров в Финском заливе: 3 / 183 Kotlin 1 / 183 Kotlin это 2 / 183 Kotlin это Остров в Финском заливе: 3 / 183 Kotlin это 4 / 183 Kotlin это Деревня в Польше: 5 / 183 Kotlin это Кетчуп: 6 / 183 Kotlin это Класс эскадренных миноносцев:

Подробнее

Как я перестал верить технологиям

Как я перестал верить технологиям Как я перестал верить технологиям Алексей Симоненко Веб-евангелист в HTML Academy 2016 Разработчики не хотят тратить вермя на HTML- и CSS-код Библиотека компонентов Разметка отдельно от компонентов

Подробнее

Динамический интерфейс с помощью Java Script

Динамический интерфейс с помощью Java Script Динамический интерфейс с помощью Java Script План Основы языка Java Script Организация динамического поведения элементов интерфейса Основы языка Java Script Переменные Объявление переменной var message;

Подробнее

О чем эта книга...16 Соглашения, используемые в книге...17 Использование примеров кода...18 Благодарности...19 Об авторе...20

О чем эта книга...16 Соглашения, используемые в книге...17 Использование примеров кода...18 Благодарности...19 Об авторе...20 Оглавление Предисловие...14 О чем эта книга....16 Соглашения, используемые в книге...17 Использование примеров кода....18 Благодарности....19 Об авторе...20 Глава 1. Hello World...21 Установка...21 Привет,

Подробнее

Элементы языка: Константы и выражения Функции Классы Операторы Регулярные выражения

Элементы языка: Константы и выражения Функции Классы Операторы Регулярные выражения PHP. Элементы языка. Элементы языка: Константы и выражения Функции Классы Операторы Регулярные выражения Константы и выражения Любой скрипт PHP состоит из последовательности операторов. Оператор может

Подробнее

CSS-in-JS Назад в будущее! Мостовой Никита Frontend developer at HeadHunter

CSS-in-JS Назад в будущее! Мостовой Никита Frontend developer at HeadHunter CSS-in-JS Назад в будущее! Мостовой Никита Frontend developer at HeadHunter 1 HeadHunter 2 3 4 Об авторе Frontend at HeadHunter Работал в командах поиска, мобильного сайта и команде HR-решений Twitter:

Подробнее

Утверждаю Директор ОсОО «Ална» Нестерова А.Р. Рабочая программа курса «PHP язык серверных скриптов»

Утверждаю Директор ОсОО «Ална» Нестерова А.Р. Рабочая программа курса «PHP язык серверных скриптов» Утверждаю Директор ОсОО «Ална» Нестерова А.Р. Рабочая программа курса «PHP язык серверных скриптов» Программа курса Чему вы научитесь Устанавливать сервер в связке Apache, PHP и MySQL Проектировать бизнес-логику

Подробнее

Введение в MPS. Михаил Власьев, JetBrains, проект MPS

Введение в MPS. Михаил Власьев, JetBrains, проект MPS Введение в MPS Михаил Власьев, JetBrains, проект MPS Michael.Vlassiev@jetbrains.com Универсальные и специализированные языки программирования Универсальные языки недостаточно выразительны Универсальные

Подробнее

Оглавление. От издательства Об авторе Предисловие Глава 1. Рабочий процесс... 20

Оглавление. От издательства Об авторе Предисловие Глава 1. Рабочий процесс... 20 Оглавление От издательства... 12 Об авторе... 12 Предисловие... 12 Выбор технологии... 14 Поможет ли вам эта книга... 14 Занятия с книгой... 15 Преподавание с этой книгой... 15 Куда обратиться в случае

Подробнее

SVARX: фреймворк для семантической валидации форм

SVARX: фреймворк для семантической валидации форм SVARX: фреймворк для семантической валидации форм Макс Ширшин Руководитель группы разработки интерфейсов Рекламных Технологий Я.Субботник, Киев, 28 мая 2011 О клиентской валидации 2 3 Серверная валидация

Подробнее

Лекция Каскадные таблицы стилей (CSS)

Лекция Каскадные таблицы стилей (CSS) Министерство образования Республики Беларусь Учреждение образования Гомельский государственный университет им. Ф. Скорины Физический факультет «Информационные системы и сети» Лекция Каскадные таблицы стилей

Подробнее

Лекция 2. Синтаксис языка PHP

Лекция 2. Синтаксис языка PHP Лекция 2. Синтаксис языка PHP PHP и HTML-текст Начав писать PHP-код, вы будете работать с самыми обычными текстовыми файлами, содержащими код PHP и HTML. HTML это простой язык разметки, позволяющий определить,

Подробнее

Жизнь в изоляции. Роман Дворнов. Avito. Москва, май 2015

Жизнь в изоляции. Роман Дворнов. Avito. Москва, май 2015 Жизнь в изоляции Роман Дворнов Avito Москва, май 2015 Я Работаю в Avito Делаю SPA Автор basis.js За любую движуху, кроме голодовки ;) Проблема Большие сайты и SPA 4 Мамонта нужно есть по частям 5 Компонентный

Подробнее

Эссе: Shareware Starter Kit: защита приложений с лицензией Shareware. (Shareware Starter Kit: protection for shareware applications.

Эссе: Shareware Starter Kit: защита приложений с лицензией Shareware. (Shareware Starter Kit: protection for shareware applications. Московский Физико-Технический Институт Факультет Радиотехники и Кибернетики Эссе: Shareware Starter Kit: защита приложений с лицензией Shareware. (Shareware Starter Kit: protection for shareware applications.)

Подробнее

УДК 004.7 Реализация сервера для установления соединения и непрерывного обмена сообщениями между парами компьютер-мобильное устройство Павлов М.С., студент Россия, 105005, г. Москва, МГТУ им. Н.Э. Баумана,

Подробнее

Реферат Объект исследования Цель исследования Метод исследования Область применения Результат работы

Реферат Объект исследования Цель исследования Метод исследования Область применения Результат работы Реферат Бакалаврская работа 41 с., 25 рис., 9 табл., 9 источников. JAVASCRIPT, REACT.JS, BACKBONE.JS, FRONT-END, ВЕБ- ПРИЛОЖЕНИЕ, КУПОННЫЙ СЕРВИС, САЙТ-КУПОН, ВЕБ- ПРИЛОЖЕНИЕ. Объект исследования купонный

Подробнее

Россия, , г. Москва, МГТУ им. Н.Э. Баумана. Научный руководитель: Пивоварова Н.В, к.т.н., доцент

Россия, , г. Москва, МГТУ им. Н.Э. Баумана. Научный руководитель: Пивоварова Н.В, к.т.н., доцент УДК 004.627 Шаблонизаторы в WEB-программировании Шевченко А.С., студент Россия, 105005, г. Москва, МГТУ им. Н.Э. Баумана, кафедра «Системы автоматизированного проектирования» Научный руководитель: Пивоварова

Подробнее

HTML 5. Позволяет более точно определить данные. Предоставляет более совершенные методы взаимодействия с сервером.

HTML 5. Позволяет более точно определить данные. Предоставляет более совершенные методы взаимодействия с сервером. Позволяет более точно определить данные Предоставляет более совершенные методы взаимодействия с сервером. Позволяет страницам хранить данные на стороне клиента () Работа с мультимедиа «из коробки» Работа

Подробнее

Внедрение БЭМ. в существующие системы. Сергей Бережной руководитель отдела разработки поисковых интерфейсов. Я.Субботник, Москва, 8 сентября 2012 года

Внедрение БЭМ. в существующие системы. Сергей Бережной руководитель отдела разработки поисковых интерфейсов. Я.Субботник, Москва, 8 сентября 2012 года в существующие системы Сергей Бережной руководитель отдела разработки поисковых интерфейсов Я.Субботник, Москва, 8 сентября 2012 года или внедрение БЭМ в существующие системы Существующие системы 4 Существующие

Подробнее

Построение эквивалентного представления исходных текстов программ для выполнения анализов потока данных в потоке управления

Построение эквивалентного представления исходных текстов программ для выполнения анализов потока данных в потоке управления Построение эквивалентного представления исходных текстов программ для выполнения анализов потока данных в потоке управления Пустыгин А.Н., Ковалевский А.А., Ошнуров Н.А., Челябинский Государственный Университет

Подробнее

Селекторы Часто используемые селекторы Перечислим наиболее часто используемые селекторы. Глава 2

Селекторы Часто используемые селекторы Перечислим наиболее часто используемые селекторы. Глава 2 Глава 2 Селекторы К ак вы уже знаете, в качестве параметра функции $() могут быть указаны селекторы, которые являются частью стандарта CSS. Рассмотрим различные возможные селекторы подробно. 2.1. Часто

Подробнее

Сколько нужно фронтендеров, чтобы написать мобильное приложение? Андрей Мелихов

Сколько нужно фронтендеров, чтобы написать мобильное приложение? Андрей Мелихов Сколько нужно фронтендеров, чтобы написать мобильное приложение? Андрей Мелихов Кто опять пустил фронтендеров в мобильную разработку? 2 Немного про Яндекс.Деньги Продуктовая структура Карточки и переводы

Подробнее

JavaScript Advanced. Занятие 7. Ajax и работа с HTTP

JavaScript Advanced. Занятие 7. Ajax и работа с HTTP JavaScript Advanced Занятие 7. Ajax и работа с HTTP Содержание Объект XMLHttpRequest Форматы данных для AJAX XMLHttpRequest и POST, отсылка форм Запрос данных через SCRIPT, формат JSONP Объект XMLHttpRequest

Подробнее

Боевое применение Node.js [фронтовые заметки]

Боевое применение Node.js [фронтовые заметки] aspirity.ru Боевое применение Node.js [фронтовые заметки] Быков Илья, ведущий разработчик Студия веб и мобильной разработки 1. Как переключиться с PHP на Node и не сломать себе мозг 1. Как переключиться

Подробнее

Предмет: Охрана труда. Приёмы изменения производительности труда интернет-программиста

Предмет: Охрана труда. Приёмы изменения производительности труда интернет-программиста Предмет: Охрана труда Приёмы изменения производительности труда интернет-программиста LAMP LAMP Linux (FreeBSD, Solaris (SAMP), Windows (WIMP)) Apache (IIS) MySQL (PostgreSQL, MS SQL) PHP (Perl, Руби?

Подробнее

- files (директория для хранения загружаемых ресурсов, права 0777, должна быть

- files (директория для хранения загружаемых ресурсов, права 0777, должна быть Структура директорий, htdocs/ (www root, сюда должен смотреть веб-сервер) - admin (загружаемые ресурсы CMS) - i (директория для хранения загружаемых ресурсов, права 0777, должна быть полностью исключена

Подробнее

Возможности использования 1С Web-расширения

Возможности использования 1С Web-расширения Возможности использования 1С Web-расширения Механизмы Web-расширения используются для решения задач нескольких уровней, в различных комбинациях с другими системами. Реализация веб-доступа к информационной

Подробнее

Нижневартовск 2017г.

Нижневартовск 2017г. Министерство образования и науки Российской Федерации Федеральное государственное бюджетное образовательное учреждение высшего образования «Нижневартовский государственный университет» Факультет информационных

Подробнее

Практическое задание 2. Калькулятор

Практическое задание 2. Калькулятор Практическое задание 2. Калькулятор Дмитрий Тимофеев 30 ноября 2011 г. 1 Постановка задачи Одной из задач лабораторной работы 1 было определение типа данных Expr, описывающего арифметические выражения

Подробнее

CSSO минимизируем CSS

CSSO минимизируем CSS CSSO минимизируем CSS Роман Дворнов Avito Москва 2015 Я Работаю в Avito Делаю SPA Автор basis.js За любую движуху, кроме голодовки ;) О чем поговорим Немного истории Минификация CSS CSSO Почему? Как? Зачем?

Подробнее

КУРСЫ ВЕБ-ПРОГРАММИРОВАНИЯ

КУРСЫ ВЕБ-ПРОГРАММИРОВАНИЯ КУРСЫ ВЕБ-ПРОГРАММИРОВАНИЯ О курсах: Обучают профессионалы. Курсы ведут профессиональные преподаватели. Также на занятиях будут присутствовать опытные практики Закрепление материала на практике, возможность

Подробнее

РАЗРАБОТКА СОВРЕМЕННОЙ РАСПРЕДЕЛЁННОЙ СИСТЕМЫ: ПРОБЛЕМЫ И РЕШЕНИЯ. Михаил Пересыпкин

РАЗРАБОТКА СОВРЕМЕННОЙ РАСПРЕДЕЛЁННОЙ СИСТЕМЫ: ПРОБЛЕМЫ И РЕШЕНИЯ. Михаил Пересыпкин РАЗРАБОТКА СОВРЕМЕННОЙ РАСПРЕДЕЛЁННОЙ СИСТЕМЫ: ПРОБЛЕМЫ И РЕШЕНИЯ Михаил Пересыпкин О себе С 1998 года разрабатывал на C/С++, что-то слышал про Java C 2000 по 2010: Ростелеком: стек J2SE/J2EE+Oracle C

Подробнее

Правила оформления кода. Отступы. Объявление переменных

Правила оформления кода. Отступы. Объявление переменных Правила оформления кода Часто программисты забывают что код программ пишется в первую очередь для людей. Даже если вы пишите программу в одиночку, то посмотрев на нее через месяц, вы не вспомните почему

Подробнее

JSON формат: создание данных, а также использование с PHP и JS

JSON формат: создание данных, а также использование с PHP и JS JSON формат: создание данных, а также использование с PHP и JS Что такое JSON и на что он способен? В этой статье вы узнаете, как использовать JSON для легкой работы с данными. Так же мы рассмотрим, как

Подробнее

Требования к выполнению и оформлению задания

Требования к выполнению и оформлению задания Самостоятельная работа 5 по дисциплине «Программирование для Интернета» Требования к выбору задания Самостоятельная работа 5 содержит одно задание. Требования к выполнению и оформлению задания Необходимо

Подробнее

Модульное тестирование. 1 Вариант 2 Вариант

Модульное тестирование. 1 Вариант 2 Вариант Модульное тестирование 1 Вариант 2 Вариант 1 В каком случае выполняется блок действий цикла for (expr1; expr2; expr3) { // блок действий } 1. если второе выражение (expr2) вычисляется как true 2. если

Подробнее

SCIENCE TIME ПОСТРОЕНИЕ ИНТЕРАКТИВНЫХ ВЕБ-ПРИЛОЖЕНИЙ С ПОМОЩЬЮ КОМПОНЕНТА AJAX

SCIENCE TIME ПОСТРОЕНИЕ ИНТЕРАКТИВНЫХ ВЕБ-ПРИЛОЖЕНИЙ С ПОМОЩЬЮ КОМПОНЕНТА AJAX ПОСТРОЕНИЕ ИНТЕРАКТИВНЫХ ВЕБ-ПРИЛОЖЕНИЙ С ПОМОЩЬЮ КОМПОНЕНТА AJAX Суляев Роман Сергеевич, Нафикова Альбина Ринатовна, Стерлитамакский филиал Башкирского государственного университета, г. Стерлитамак 544

Подробнее

Введение в PHP. Синтаксис

Введение в PHP. Синтаксис Web-технологии Введение в PHP. Синтаксис Кулаков Кирилл Александрович ПетрГУ, 2016 1 Информация о курсе Продолжительность 30 часов лекций 15 часов лабораторных работ Контроль успеваемости лабораторные

Подробнее

Лабораторная работа 1 Технологии создания и валидации XML-документов. 1. Создание XML-документов с помощью среды Microsoft Visual Web Developer

Лабораторная работа 1 Технологии создания и валидации XML-документов. 1. Создание XML-документов с помощью среды Microsoft Visual Web Developer Лабораторная работа 1 Технологии создания и валидации XML-документов 1. Создание XML-документов с помощью среды Microsoft Visual Web Developer Методика выполнения 1.1. Создать новый XML-документ Пуск Программы

Подробнее

PHP Tests. Version 1.0

PHP Tests. Version 1.0 PHP Tests Version 1.0 Revision History Date Version Description Author 2/17/2010 1.0 Initial version Anton Shevchuk Public NIX Solutions, Ltd. 2010 Page 2 Table of Contents 1. PHP 4 2. SQL 7 3. HTML и

Подробнее

Логическое резервирование

Логическое резервирование Логическое резервирование Темы Логическое и физическое резервирование Копирование отдельных таблиц Резервирование и восстановление баз данных и кластера 2 Виды резервирования Логическое резервирование

Подробнее

5.1. Получение доступа к странице и её элементам

5.1. Получение доступа к странице и её элементам Часть 1 5.1. Получение доступа к странице и её элементам Основное назначение Web-сценариев управление содержимым страницы в ответ на какие-либо действия посетителя. Поэтому первое, что нам требуется изучить,

Подробнее

FUNBOX. Квалификационные задания для разработчиков JavaScript

FUNBOX. Квалификационные задания для разработчиков JavaScript FUNBOX Квалификационные задания для разработчиков JavaScript О заданиях Данные задания были разработаны для того, чтобы мы могли оценить уровень ваших знаний. Они составлены таким образом, что вы можете

Подробнее

ВЫПУСКНАЯ РАБОТА БАКАЛАВРА

ВЫПУСКНАЯ РАБОТА БАКАЛАВРА Санкт-Петербургский политехнический университет Петра Великого Институт компьютерных наук и технологий Высшая школа программной инженерии Работа допущена к защите Директор ВШПИ П. Д. Дробинцев 2017г. ВЫПУСКНАЯ

Подробнее

Инструкция по обработке креативов, преобразованных через Flash CC/Adobe Animate/ Google Web Designer/Adobe Edge

Инструкция по обработке креативов, преобразованных через Flash CC/Adobe Animate/ Google Web Designer/Adobe Edge Инструкция по обработке креативов, преобразованных через Flash CC/Adobe Animate/ Google Web Designer/Adobe Edge 20.02.2017 Общие требования 1. Перенести содержимое файла index.js в тег

Подробнее

Программная реализация генерации чертежей AutoCAD в веб-приложении

Программная реализация генерации чертежей AutoCAD в веб-приложении Программная реализация генерации чертежей AutoCAD в веб-приложении В.В. Осокин, В.А. Бендик, З.А. Ниязова В статье рассматриваются задачи генерации спецификаций, характеристик и схем вентиляционных установок

Подробнее

Московский государственный технический университет имени Н. Э. Баумана Факультет Информатика и системы управления Кафедра Компьютерные системы и сети

Московский государственный технический университет имени Н. Э. Баумана Факультет Информатика и системы управления Кафедра Компьютерные системы и сети Московский государственный технический университет имени Н. Э. Баумана Факультет Информатика и системы управления Кафедра Компьютерные системы и сети «УТВЕРЖДАЮ» Заведующий кафедрой ИУ-6 Сюзев В.В. Р.С.

Подробнее

Введение ЧАСТЬ I. СПРИНТ ПЕРВЫЙ: ПРИЛОЖЕНИЕ ALPINE SKI HOUSE... 21

Введение ЧАСТЬ I. СПРИНТ ПЕРВЫЙ: ПРИЛОЖЕНИЕ ALPINE SKI HOUSE... 21 Оглавление Введение... 16 Для кого написана эта книга... 16 Что необходимо для чтения... 17 Эта книга вам не подойдет, если... 17 Структура книги... 17 С какого места начинать чтение... 18 Оформление и

Подробнее

Работа с базами данных в системе Dreamweaver Методические указания к лабораторной работе по курсу «Сетевое программирование»

Работа с базами данных в системе Dreamweaver Методические указания к лабораторной работе по курсу «Сетевое программирование» Рно Федеральное агентство по образованию Государственное образовательное учреждение высшего профессионального образования Тульский государственный университет Кафедра автоматики и телемеханики Работа с

Подробнее

Фронтенд в Avito. Александр

Фронтенд в Avito. Александр Фронтенд в Avito Александр Лобашев, @limarc 1. История фронтенда 2. Разработка и архитектура 3. Система сборки 2 О проекте Топ-10 сайтов Рунета 10 000 000 000 просмотров в месяц 70 000 000 уникальных

Подробнее

Массивы. Функции в PHP.

Массивы. Функции в PHP. Лекция 3 Массивы. Функции в PHP. 1. Массивы. Массивы представляют собой сложный тип данных, состоящий из цепочки значений, которые в свою очередь могут принадлежать также как к скалярному типу, так и быть

Подробнее

УП: КВ9.osf стр. 4

УП: КВ9.osf стр. 4 УП: 09.02.03-2012-4-КВ9.osf стр. 4 1. ЦЕЛИ ОСВОЕНИЯ ДИСЦИПЛИНЫ 1.1 Основной целью дисциплины является расширение профессиональных знаний студентов в области информационных технологий. 1.2 Задачами дисциплины

Подробнее

Безопасное программирование на PHP

Безопасное программирование на PHP Безопасное программирование на PHP Комаров Антон, студент 915 группы 15 апреля 2003 г. 1 Содержание 1 Введение. 3 2 Виды уязвимостей. 3 2.1 Глобальные переменные.................... 3 2.2 Файлы на удаленной

Подробнее

Cовременные WEB технологии

Cовременные WEB технологии בס"ד דרך ההגנה 34, תל-אביב 67721 טל. 03-5603046, פקס 03-5662592 34, Dereh Ha-Agana St., Tel-Aviv 67721 Tel. +972-3-5603046, fax +972-3-5662592 www.newman.c.il inf@newman.c.il Cовременные WEB технологии

Подробнее

Руководство по созданию сайта. для системы управления сайтами АТИЛЕКТ.CMS 7.0

Руководство по созданию сайта. для системы управления сайтами АТИЛЕКТ.CMS 7.0 Руководство по созданию сайта для системы управления сайтами АТИЛЕКТ.CMS 7.0 1. Описание файловой структуры сайта Файловая структура сайта представлена в следующем виде: Рис. 1 Ниже представлено описание

Подробнее

Как разработать мобильное/веб приложение без больших затрат времени и денег. Далер Каримов КИТ-2015, Бишкек

Как разработать мобильное/веб приложение без больших затрат времени и денег. Далер Каримов КИТ-2015, Бишкек Как разработать мобильное/веб приложение без больших затрат времени и денег Далер Каримов КИТ-2015, Бишкек Вы можете видеть ваш проект так: 2 (плохой) Менеджер проектов - так: 3 (хороший) Менеджер проектов

Подробнее

Что такое HTML? Шпаргалка для начинающих Web Разработчиков

Что такое HTML? Шпаргалка для начинающих Web Разработчиков Что такое HTML? Шпаргалка для начинающих Web Разработчиков Геннадий Караченцев www.weblaboratory.in.ua Из чего состоит инертен страница? Страница HTML CSS JavaScript Что все это значит? HTML Файл Структура

Подробнее

Генерация мобильных приложений в проекте QRealWeb

Генерация мобильных приложений в проекте QRealWeb Санкт-Петербургский государственный университет Математико-механический факультет Генерация мобильных приложений в проекте QRealWeb Курсовая работа студента 243 группы Захарова Владимира Александровича

Подробнее

ИСПОЛЬЗОВАНИЕ МЕТАСТРУКТУР ПРИ ПРОЕКТИРОВАНИИ ВЕБ- ИНТЕРФЕЙСА ВИРТУАЛЬНОЙ ЛАБОРАТОРИИ

ИСПОЛЬЗОВАНИЕ МЕТАСТРУКТУР ПРИ ПРОЕКТИРОВАНИИ ВЕБ- ИНТЕРФЕЙСА ВИРТУАЛЬНОЙ ЛАБОРАТОРИИ ИСПОЛЬЗОВАНИЕ МЕТАСТРУКТУР ПРИ ПРОЕКТИРОВАНИИ ВЕБ- ИНТЕРФЕЙСА ВИРТУАЛЬНОЙ ЛАБОРАТОРИИ В.В. Воробьев Введение Виртуальные лаборатории представляют собой современный способ организации совместной исследовательской

Подробнее

Руководство по стилю программирования

Руководство по стилю программирования Руководство по стилю программирования Версия 1.0 SantaFox developer Saint-Peterburg, 2008 Оглавление Введение... 3 Для кого это руководство... 3 О чём это руководство... 3 Отступы, длина строки и выравнивание...

Подробнее

От фреймворков к сверхфреймворкам

От фреймворков к сверхфреймворкам От фреймворков к сверхфреймворкам Меня зовут Сергей. Я работаю фронтенд-разработчиком в компании QIWI. Вообще фронтенд разработкой занимаюсь примерно 5 лет. До этого примерно столько же писал на php. Меня

Подробнее

Направление подготовки Информатика и вычислительная техника код и наименование направления подготовки

Направление подготовки Информатика и вычислительная техника код и наименование направления подготовки Министерство образования и науки Российской Федерации Федеральное государственное бюджетное образовательное учреждение высшего образования «НИЖЕГОРОДСКИЙ ГОСУДАРСТВЕННЫЙ ТЕХНИЧЕСКИЙ УНИВЕРСИТЕТ ИМ. Р.

Подробнее

Центр программирования «ИнитГраф» Страница 1

Центр программирования «ИнитГраф» Страница 1 ПРОГРАММА ПОВЫШЕНИЯ КВАЛИФИКАЦИИ PHP ПРОГРАММИСТ Модуль 1. PHP программирование - уровень 1 Занятие 1-2. Сервер Apache. Установка PHP Как работает HTML Как работает PHP Установка сервера Apache Служба

Подробнее

Клиентские js-компоненты

Клиентские js-компоненты Клиентские js-компоненты разные способы создания Сергей Бережной руководитель отдела разработки поисковых интерфейсов Я.Субботник, Москва, 28 июля 2012 года 1 Что это? 2 Что это? HTML 4 Что это? HTML

Подробнее

ПРОГРАММНОЕ СОЗДАНИЕ ПЛАГИНА WYSIWYG В DRUPAL 7

ПРОГРАММНОЕ СОЗДАНИЕ ПЛАГИНА WYSIWYG В DRUPAL 7 NovaInfo.Ru - 9, 2012 г. Технические науки 1 ПРОГРАММНОЕ СОЗДАНИЕ ПЛАГИНА WYSIWYG В DRUPAL 7 Долганов Алексей Александрович Взаимодействие с пользователем играет решающую роль при работе с пользователем.

Подробнее

Обобщения. Основные понятия

Обобщения. Основные понятия Обобщения. Основные понятия Термин «обобщение», по существу, означает параметризированный тип. Особая роль параметризированных типов состоит в том, что они позволяют создавать классы, структуры, интерфейсы,

Подробнее

Web-технологии 3. Программные модели доступа к XML

Web-технологии 3. Программные модели доступа к XML Web-технологии 3 Программные модели доступа к XML Введение XML универсальный формат обмена данными XML пассивный формат Необходимы правила создания и анализа XML документов Популярные API для работы с

Подробнее

Современные технологии программирования (часть 2)

Современные технологии программирования (часть 2) Гуляев Г.М. Современные технологии программирования (часть 2) Лекция 5. Case - классы и поиск по шаблону (pattern matching) Курс лекций для студентов АлтГТУ LOGO Равенство объектов Проверка на равенство

Подробнее

Фонд оценочных средств для проведения промежуточной аттестации обучающихся по дисциплине

Фонд оценочных средств для проведения промежуточной аттестации обучающихся по дисциплине Фонд оценочных средств для проведения промежуточной аттестации обучающихся по дисциплине Общие сведения 1. Кафедра Математики, физики и информационных технологий 2. Направление подготовки 02.03.01 Математика

Подробнее

Mikhail Glukhikh mailto: JetBrains, Senior Software Developer

Mikhail Glukhikh mailto: JetBrains, Senior Software Developer Mikhail Glukhikh mailto: Mikhail.Glukhikh@jetbrains.com JetBrains, Senior Software Developer Разрабатывается JetBrains с 2011 Open-Source с 2012 Версия 1.0 выпущена в феврале 2016 Компилируется в JVM и

Подробнее

Инструментальная поддержка встроенных языков в интегрированных средах разработки

Инструментальная поддержка встроенных языков в интегрированных средах разработки Десятая независимая научнопрактическая конференция "Pазработка ПО 2014" 23-25 октября, Москва Инструментальная поддержка встроенных языков в интегрированных средах разработки Автор: Григорьев Семён Лаборатория

Подробнее

SVARX: борьба с большими формами. Макс Ширшин. Руководитель группы разработки интерфейсов Рекламных Технологий

SVARX: борьба с большими формами. Макс Ширшин. Руководитель группы разработки интерфейсов Рекламных Технологий SVARX: борьба с большими формами Макс Ширшин Руководитель группы разработки интерфейсов Рекламных Технологий Я.Субботник, Новосибирск, 19 ноября 2011 Большие формы и клиентская валидация 2 Зачем нужна

Подробнее

Общая структура сервисов

Общая структура сервисов Общая структура сервисов Android Java Me web Client-side Interface Android GUI Java GUI 1 2 1 2 html, css, java-script Core Program logic Program logic 5 6 3 4 3 4 Mobile Services Server Service API site-engine

Подробнее

Фонд оценочных средств для проведения промежуточной аттестации обучающихся по дисциплине

Фонд оценочных средств для проведения промежуточной аттестации обучающихся по дисциплине Фонд оценочных средств для проведения промежуточной аттестации обучающихся по дисциплине Общие сведения 1. Кафедра 2. Направление подготовки 3. Дисциплина (модуль) Математики, физики и информационных технологий

Подробнее

Динамический HTML. Введение в JavaScript

Динамический HTML. Введение в JavaScript Динамический HTML. Введение в JavaScript Цель работы Ознакомиться с базовым синтаксисом и основными возможностями управления содержимым веб-страницы на стороне клиента. Получить практические навыки написания

Подробнее

Основы сеонизма. или как перестать ненавидеть SEO и начать делать хорошие сайты

Основы сеонизма. или как перестать ненавидеть SEO и начать делать хорошие сайты Основы сеонизма или как перестать ненавидеть SEO и начать делать хорошие сайты SEO SEO и теги Влияние тегов на вес ключевого слова h1 h6 71% strong 34% b 27% em 25% p 24% li 13% No comment

Подробнее

Web-технологии. Функции PHP. Кулаков Кирилл Александрович. ПетрГУ,

Web-технологии. Функции PHP. Кулаков Кирилл Александрович. ПетрГУ, Web-технологии Функции PHP Кулаков Кирилл Александрович ПетрГУ, 2016 1 Пользовательские функции Повторное использование блока кода Синтаксис: function имя (аргумент1[=значение1],...) { тело_функции; [return

Подробнее

ЮРИЙ КОВАЛЁВ ИНЖЕНЕР-ПРОГРАММИСТ, АО «АРКАДИЯ» Чистый код в коммерческой разработке. Есть ли предел совершенству?

ЮРИЙ КОВАЛЁВ ИНЖЕНЕР-ПРОГРАММИСТ, АО «АРКАДИЯ» Чистый код в коммерческой разработке. Есть ли предел совершенству? ЮРИЙ КОВАЛЁВ ИНЖЕНЕР-ПРОГРАММИСТ, АО «АРКАДИЯ» Чистый код в коммерческой разработке. Есть ли предел совершенству? Немного о себе ЮРИЙ КОВАЛЁВ АО «АРКАДИЯ» YURIY.KOVALEV@SOFTWARECOUNTRY.RU Full-stack программист

Подробнее

Содержание. Предисловие Вступление Благодарности Об этой книге Об иллюстрации на обложке... 25

Содержание. Предисловие Вступление Благодарности Об этой книге Об иллюстрации на обложке... 25 Содержание Предисловие... 13 Вступление... 15 Благодарности... 16 Об этой книге... 19 Об иллюстрации на обложке... 25 Часть I. Введение в SPA...26 Глава 1. Наше первое одностраничное приложение... 28 1.1.

Подробнее

Инструкция по интеграции рекламодателей с партнёрской сетью Advertise.ru

Инструкция по интеграции рекламодателей с партнёрской сетью Advertise.ru Инструкция по интеграции рекламодателей с партнёрской сетью Advertise.ru Общий принцип работы Интеграция состоит из трёх основных частей: 1. Обработка перехода пользователя из сети Advertise на сайт рекламодателя;

Подробнее

Введение Часть I. Основы программирования приложений для браузеров

Введение Часть I. Основы программирования приложений для браузеров Оглавление Благодарности... 15 Введение... 16 Разработка веб-приложений клиентской части... 16 Необходимые знания... 17 Структура книги... 17 Как пользоваться книгой... 18 Упражнения... 19 Для самых любознательных...

Подробнее

Тема 3. Работа с текстом Adobe Dreamweaver

Тема 3. Работа с текстом Adobe Dreamweaver 1 Тема 3. Работа с текстом Adobe Dreamweaver Основная задача Web-дизайнера ввести, отредактировать и отформатировать текст Web-страницы. Инструментальные средства Dreamweaver существенно упрощают обработку

Подробнее

AddressOK Documentation

AddressOK Documentation AddressOK Documentation Выпуск 0.1.0beta1 Ildar Ahmadullin 05 November 2016 Оглавление 1 Общее описание 1 1.1 Что такое AddressOK....................................... 1 1.2 Как это работает..........................................

Подробнее

Лекция 2. Как выполняются программы на C++

Лекция 2. Как выполняются программы на C++ http://compscicenter.ru 1/21 Лекция 2. Как выполняются программы на C++ Александр Смаль CS центр 15 сентября 2016 Санкт-Петербург http://compscicenter.ru 2/21 Типы данных Целочисленные: 1. char (символьный

Подробнее

Клиентский JavaScript в БЭМ-терминах. Сергей Бережной руководитель отдела разработки поисковых интерфейсов

Клиентский JavaScript в БЭМ-терминах. Сергей Бережной руководитель отдела разработки поисковых интерфейсов Клиентский JavaScript в БЭМ-терминах Сергей Бережной руководитель отдела разработки поисковых интерфейсов Вступление Кто я? Вступление Кто я? Разработчик интерфейсов Яндекса с 2005 года Руководитель отдела

Подробнее

Что такое HTML? HTML

Что такое HTML? HTML HTML - это просто План вебинара 1. Знакомство 2. Что такое HTML? 3. Базовая HTML-разметка. 4. Инструменты для работы с HTML. 5. Синтаксис HTML. 6. Строение HTML тегов. 7. Знакомство с CSS. 8. Подключение

Подробнее

О РАЗРАБОТКЕ ИНТЕГРИРОВАННОЙ СРЕДЫ ДЛЯ СОЗДАНИЯ 3D-ПРИЛОЖЕНИЙ

О РАЗРАБОТКЕ ИНТЕГРИРОВАННОЙ СРЕДЫ ДЛЯ СОЗДАНИЯ 3D-ПРИЛОЖЕНИЙ О РАЗРАБОТКЕ ИНТЕГРИРОВАННОЙ СРЕДЫ ДЛЯ СОЗДАНИЯ 3D-ПРИЛОЖЕНИЙ Г. А. Ломакин Гродненский государственный университет имени Я. Купалы Гродно, Беларусь E-mail: spellbound.fpmi@gmail.com Рассматриваются общие

Подробнее

ОПТИМИЗАЦИЯ ВЕБ-ИНТЕРФЕЙСА НА СТОРОНЕ КЛИЕНТА ДЛЯ РАБОТЫ С ТАБЛИЧНЫМИ ДАННЫМИ. Е.А. Илюшечкин, И.С. Молодых

ОПТИМИЗАЦИЯ ВЕБ-ИНТЕРФЕЙСА НА СТОРОНЕ КЛИЕНТА ДЛЯ РАБОТЫ С ТАБЛИЧНЫМИ ДАННЫМИ. Е.А. Илюшечкин, И.С. Молодых Математические структуры и моделирование 2013. 2(28). С. 80 87 УДК 004.4 ОПТИМИЗАЦИЯ ВЕБ-ИНТЕРФЕЙСА НА СТОРОНЕ КЛИЕНТА ДЛЯ РАБОТЫ С ТАБЛИЧНЫМИ ДАННЫМИ Е.А. Илюшечкин, И.С. Молодых В работе описана задача

Подробнее

Абстрактный синтаксический анализ на основе GLR-алгоритма

Абстрактный синтаксический анализ на основе GLR-алгоритма Девятая независимая научнопрактическая конференция "Pазработка ПО 2013" 23-25 октября, Москва Абстрактный синтаксический анализ на основе GLR-алгоритма Автор: Григорьев Семён Вячеславович Лаборатория JetBrains

Подробнее

ОБЗОР ОСОБЕННОСТЕЙ ЯЗЫКА ПРОГРАММИРОВАНИЯ KOTLIN.

ОБЗОР ОСОБЕННОСТЕЙ ЯЗЫКА ПРОГРАММИРОВАНИЯ KOTLIN. УДК 004.432 Колмакова Е.Н., студентка 3 курс, факультет «Информационные системы и технологии» Поволжский Государственный Университет Телекоммуникаций и Информатики Россия, г. Самара ОБЗОР ОСОБЕННОСТЕЙ

Подробнее

Некешируемые области.

Некешируемые области. Некешируемые области. Модуль позволяет добавить в любое место сайта (в т.ч. кешируемый компонент) некешируемую область. Данные можно выводить как с помощью назначения контента области, так и с помощью

Подробнее

HTML5 Web Components: следующий шаг к модульности вашего проекта. Андрей Рахманов, Enaza DevConf 2015, 19 июня 2015 г.

HTML5 Web Components: следующий шаг к модульности вашего проекта. Андрей Рахманов, Enaza DevConf 2015, 19 июня 2015 г. HTML5 Web Components: следующий шаг к модульности вашего проекта Андрей Рахманов, Enaza DevConf 2015, 19 июня 2015 г. 2 Как мы решили попробовать 3 Single-Page App 4 Google I/O 2014 5 Google I/O 2014

Подробнее