├── .gitignore ├── README.md ├── README.ru.md ├── guide ├── README.md ├── nodejs-beginners-guide │ └── README.md └── websocket.md ├── project ├── README.md ├── data │ └── openstreetmap.md ├── design-http-api-cases.md ├── design-http-api.md ├── intro-to-js-callbacks.md └── lab-milestones.md └── textbook ├── README.md ├── books-for-the-course.md ├── books-for-the-course.ru.md ├── classes └── materials.md ├── introduction ├── deployment.md └── javascript.md ├── outside.md ├── section-1 ├── README.md ├── chapter-1 │ ├── README.md │ ├── browser │ │ ├── index-with-script.html │ │ └── index.html │ └── http-server │ │ └── server.js ├── chapter-2.md ├── chapter-2 │ └── html-history.md ├── chapter-3 │ └── README.md └── web-progress.md ├── section-2 ├── README.md ├── chapter-1 │ ├── README.md │ └── error-handling.md └── chapter-2 │ └── README.md ├── section-3 ├── README.md ├── chapter-1 │ ├── README.md │ ├── beyond-css.md │ ├── css-in-details.md │ ├── css │ │ └── README.md │ ├── js-frameworks.md │ ├── module-bundling.md │ └── module-bundling.ru.md ├── chapter-2 │ └── README.md ├── chapter-3 │ ├── README.md │ └── jsx.md └── chapter-4 │ ├── README.md │ ├── history-pushstate.md │ └── service-workers.md └── section-4 ├── README.md ├── chapter-1 └── README.md ├── chapter-2 └── README.md └── chapter-3 └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | .idea/* 2 | !.idea/dictionaries 3 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Web applications development 2017 2 | 3 | In Russian it is "Современные технологии разработки веб-приложений" which means 4 | _modern technologies for web application development_, so during this course we 5 | would practice in development of web applications as it is done in 2017. 6 | 7 | ## Lecture Slides 8 | 9 | [Lecture slides][] are accessible to everyone from Google Drive. 10 | 11 | [Lecture Slides]: https://drive.google.com/folderview?id=0B3ITOCI-O3udSjhLcUNhSWc5MkE&usp=sharing 12 | 13 | ## Textbook 14 | 15 | - https://github.com/grsu/web-dev/tree/master/textbook 16 | -------------------------------------------------------------------------------- /README.ru.md: -------------------------------------------------------------------------------- 1 | # Современные технологии разработки веб-приложений 2 | 3 | Данный репозиторий предназначен для коммуникации в рамках курса "Современные технологии разработки веб-приложений". 4 | 5 | ## Учебная программа 6 | 7 | [Содержание учебного материала](https://github.com/grsu/web-dev-uch-docs/blob/master/README.md) 8 | 9 | Учебные материалы вынесены в отдельный репозиторий. Там вы ознакомитесь с 10 | разделами, темами и их кратим содержанием как оно определено учебной 11 | программой. 12 | 13 | В каждой теме вы найдёте примерный план для лекции и материалы для самостоятельного изучения. 14 | 15 | ## Учебник / Textbook 16 | 17 | - https://github.com/grsu/web-dev/tree/master/textbook 18 | 19 | ## Презентации для лекций 20 | 21 | [Презентации для лекций][1] 22 | 23 | [1]: https://drive.google.com/folderview?id=0B3ITOCI-O3udSjhLcUNhSWc5MkE&usp=sharing 24 | -------------------------------------------------------------------------------- /guide/README.md: -------------------------------------------------------------------------------- 1 | # Ресурсы для самостоятельного изучения 2 | 3 | ## Первая веха: реализация сервера 4 | 5 | Первым шагом предлагается реализация сервера приложения используя только модуль `http`, т.е. не применяя фреймворки для маршрутизации, например hapi.js или express. 6 | 7 | - [Anatomy of an HTTP Transaction](https://nodejs.org/en/docs/guides/anatomy-of-an-http-transaction/) 8 | - [Node.js v5.7.0 Documentation](https://nodejs.org/dist/latest-v5.x/docs/api/) 9 | 10 | Познав основы, и критически осмыслив получившеесе решение, можно переходить к express, hapi.js или любому другому серверному фреймворку. 11 | 12 | - http://expressjs.com/, в первую очередь нас интересуют разделы _Getting started_ и _Guide_. 13 | - http://hapijs.com/tutorials 14 | - https://github.com/dwyl/learn-hapi возможно ещё лучше для начала изучения 15 | 16 | Хорошим источников для анализа различий этих двух фреймворков будет презентация создателя hapi.js от 2013 года - [_Eran Hammer of WalMart Labs presents hapi_](https://www.youtube.com/watch?v=Recv7vR8ZlA). 17 | 18 | ## JavaScript 19 | 20 | За основу для изучения языка можно взять одну из книг: 21 | 22 | - http://eloquentjavascript.net/ с интерактивным обучением прямо по тексту 23 | - http://speakingjs.com/ от введения до ES5 24 | - http://exploringjs.com/ переходим к ES6 25 | 26 | Язык не стоит на месте. 27 | 28 | - https://github.com/lukehoban/es6features краткий обзор новых возможностей 29 | - http://es6katas.org/ учите ES6 практикуя его, до момента пока тест не станет зелёным 30 | - https://babeljs.io/ изучите этот инструмент 31 | 32 | ## Публикация кода в GitHub 33 | 34 | Работая в команде, важно чтоб работа над приложением могла вестись параллельно различными людими на разных окружениях. Для этого стоит использовать систему контроля версий, например Git. 35 | 36 | Опубликованный код должен быть готов для работы на новых окружениям. Это значит что его зависимости от окружения и других пакетов должны быть явно прописаны в формате понятном принятым инструментарием. В случае Node.js проекта, этим инструментом будет `npm`, а форматом `package.json`. 37 | 38 | - [npm init](https://docs.npmjs.com/cli/init) 39 | - https://docs.npmjs.com/files/package.json 40 | - https://docs.npmjs.com/files/package.json#dependencies для задания зависимостей 41 | - https://docs.npmjs.com/files/package.json#scripts для задания команды запуска (среди прочего) 42 | 43 | ## Тестирование сервера 44 | 45 | Нужно ли говорить о необходимости автоматического тестирования? 46 | 47 | - https://github.com/visionmedia/supertest для express 48 | - hapi.js тоже можно тестировать этим методом, но у них есть и своё решение 49 | - https://github.com/dwyl/learn-hapi#testing-with-lab для hapi.js 50 | 51 | ## Контроль качества кода 52 | 53 | - JSCS 54 | - ESLint 55 | 56 | Найдите эти инструменты и научитесь ими пользоваться. 57 | 58 | Пример: 59 | - https://github.com/grsu/web-dev/issues/85#issuecomment-192405633 60 | - https://github.com/Stelmashenko-A/Timetable/pull/8 61 | 62 | ## Вторая веха: скоро... 63 | -------------------------------------------------------------------------------- /guide/nodejs-beginners-guide/README.md: -------------------------------------------------------------------------------- 1 | # Installation 2 | 3 | - https://github.com/creationix/nvm 4 | 5 | # Resources 6 | 7 | - http://nodeguide.com/beginner.html 8 | - outdated, but still useful because of logical flow 9 | -------------------------------------------------------------------------------- /guide/websocket.md: -------------------------------------------------------------------------------- 1 | ## Common issues 2 | 3 | - http://stackoverflow.com/questions/31002592/javascript-doesnt-catch-error-in-websocket-instantiation 4 | -------------------------------------------------------------------------------- /project/README.md: -------------------------------------------------------------------------------- 1 | # Project 2 | 3 | During the course students work in groups of two or three on a project of their 4 | choice. 5 | 6 | Goal of a project is to acquire practical skills in modern web application 7 | technologies. Domain model should be simplified to a bare minimum, so focus 8 | could be set on technologies rather than complicated domain rules. 9 | 10 | # Projects 11 | 12 | - [2017](https://docs.google.com/spreadsheets/d/1-T5btFk8fIER2t-Wjh2StpoJZjfy08QqPRn1MeQkhLg/pubhtml) 13 | 14 | # Guide 15 | 16 | ## Common Practices 17 | 18 | ### Occam's razor 19 | 20 | Use [Occam's razor](https://en.wikipedia.org/wiki/Occam's_razor) when defining 21 | project scope. Which means _among many user stories, the one with the fewest 22 | domain rules should be selected._ 23 | 24 | ### Ubiquitous Language 25 | 26 | - read https://martinfowler.com/bliki/UbiquitousLanguage.html 27 | - practice Ubiquitous Language when writing user stories and designing API 28 | 29 | ## Recommendations 30 | 31 | - work on projects in groups of two or three, as it would be most efficient 32 | - model data and mock it to simplify initial implementation 33 | - i.e. don't be blocked by _complex external API_ 34 | 35 | # Steps 36 | 37 | - define project idea 38 | - write user stories 39 | - outline major terms which would be used in API 40 | - design HTTP API which follows REST architectural style 41 | - implement server API 42 | - implement client 43 | -------------------------------------------------------------------------------- /project/data/openstreetmap.md: -------------------------------------------------------------------------------- 1 | - https://www.openstreetmap.org/ 2 | 3 | # Data 4 | 5 | - https://overpass-turbo.eu/ 6 | 7 | ``` 8 | [out:json]; 9 | node(around:500, 53.68582, 23.83156)[amenity=cafe]; 10 | out; 11 | ``` 12 | 13 | ``` 14 | [out:json]; 15 | area[name="Гродно"][boundary]->.city; 16 | ( 17 | node(area.city)[amenity=cafe]; 18 | (way(area.city)[amenity=cafe]; >;); 19 | (rel(area.city)[amenity=cafe]; >;); 20 | ); 21 | out; 22 | ``` 23 | 24 | # Routing 25 | 26 | - https://github.com/Project-OSRM/osrm-backend/wiki/Running-OSRM 27 | - https://github.com/Project-OSRM/osrm-backend/blob/master/profiles/car.lua 28 | -------------------------------------------------------------------------------- /project/design-http-api-cases.md: -------------------------------------------------------------------------------- 1 | # Product catalog 2 | 3 | PUT /cart/product/:id 4 | { count: 0 } 5 | 6 | POST /cart 7 | { product: id, count: 4 } 8 | 9 | DELETE /cart 10 | { } 11 | 12 | /product/all 13 | /product/:id 14 | 15 | --- 16 | 17 | POST client -/-> server x 1 18 | POST client -/-> server x 2 19 | 20 | PUT /post/:id-from-s13 -/-> x 1, 0 21 | PUT /post/:id-from-s13 --> x 1, !==2 22 | 23 | GET /users/:userId/comments 24 | GET /comments/?userId=:userId 25 | 26 | PUT /users/:userId/comments/:commentId 27 | PUT /comments/:commentId 28 | 29 | comment = fetch(:commentId) 30 | if (cooment.author === req.user) { 31 | update() 32 | } 33 | 34 | /cafe/id 35 | /cafe/:id/info?d=:aa 36 | /cafe/12 /cate/45454 37 | 38 | 39 | --- 40 | 41 | /weather/:city/current 42 | /weather/:city/future/next-hour 43 | /weather/:city/future/weekend 44 | -------------------------------------------------------------------------------- /project/design-http-api.md: -------------------------------------------------------------------------------- 1 | # Examples 2 | 3 | # Frequent Cases 4 | 5 | ## PUT and POST 6 | 7 | What is the semantic different between PUT and POST? Usual (incorrect) answer 8 | is that _POST should be used to create a resource, while PUT should be used 9 | for updating it_. 10 | 11 | - search for `PUT POST RFC` 12 | - you would find RFC 7231 _Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content_ 13 | -------------------------------------------------------------------------------- /project/intro-to-js-callbacks.md: -------------------------------------------------------------------------------- 1 | function query(sql, callback) { 2 | db.send(sql, callback); 3 | } 4 | -------------------------------------------------------------------------------- /project/lab-milestones.md: -------------------------------------------------------------------------------- 1 | We have 9 lab classes, 1h 20m each. 2 | 3 | # Lab 1. 4 | 5 | - `express-generator` 6 | - Checkpoint: functional express app with server-rendered pages. 7 | - data could be mocked 8 | 9 | # Lab 2. 10 | 11 | - rework express app to provide JSON API in addition to server-rendered pages. 12 | - Checkpoint: JSON API 13 | - data could be mocked 14 | 15 | # Lab 3. 16 | 17 | - `index.html` + `index.js` 18 | - Checkpoint: client integration with JSON API 19 | - data could be mocked 20 | 21 | # Lab 4. 22 | 23 | - use real data, placed out of a server process (database or third-party service) 24 | - Checkpoint: functional single-page client 25 | - data should be received from outside of a server process 26 | 27 | # Lab 5. 28 | 29 | - webpack + Babel basics 30 | - Checkpoint: modular single-page app 31 | 32 | # Lab 6. 33 | 34 | - `create-react-app` or another tool 35 | - Checkpoint: functional React app 36 | 37 | # Lab 7. 38 | 39 | - PouchDB 40 | - Checkpoint: functional app without network connection 41 | 42 | # Lab 8. 43 | 44 | - Service Workers usage 45 | - Checkpoint: app could be loaded without network 46 | 47 | # Lab 9. 48 | 49 | - high load testing 50 | - cross-browser testing 51 | -------------------------------------------------------------------------------- /textbook/README.md: -------------------------------------------------------------------------------- 1 | # Содержание учебного материала 2 | 3 | Премерный [тематический план][]. Обратите внимание, что "аудиторный час" это один академический час, т.е. если на раздел отведено 8 аудиторных часов, это ровно 4 пары. 4 | 5 | [тематический план]: https://docs.google.com/spreadsheets/d/173FNcffcvjuNPE2754K6jipSeke2b3AkuVS35BfqD2c/pubhtml?gid=0&single=true 6 | 7 | 8 | 9 | - [Раздел 1.](#%D1%80%D0%B0%D0%B7%D0%B4%D0%B5%D0%BB-1) 10 | * [Тема 1. Основные сведения о принципах функционирования веб-приложений.](#%D1%82%D0%B5%D0%BC%D0%B0-1-%D0%BE%D1%81%D0%BD%D0%BE%D0%B2%D0%BD%D1%8B%D0%B5-%D1%81%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D1%8F-%D0%BE-%D0%BF%D1%80%D0%B8%D0%BD%D1%86%D0%B8%D0%BF%D0%B0%D1%85-%D1%84%D1%83%D0%BD%D0%BA%D1%86%D0%B8%D0%BE%D0%BD%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F-%D0%B2%D0%B5%D0%B1-%D0%BF%D1%80%D0%B8%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%B8%D0%B9) 11 | * [Тема 2. Базовая архитектура веб-приложения.](#%D1%82%D0%B5%D0%BC%D0%B0-2-%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%B0%D1%8F-%D0%B0%D1%80%D1%85%D0%B8%D1%82%D0%B5%D0%BA%D1%82%D1%83%D1%80%D0%B0-%D0%B2%D0%B5%D0%B1-%D0%BF%D1%80%D0%B8%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F) 12 | * [Тема 3. Веб-приложение как клиент-серверное приложение.](#%D1%82%D0%B5%D0%BC%D0%B0-3-%D0%B2%D0%B5%D0%B1-%D0%BF%D1%80%D0%B8%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5-%D0%BA%D0%B0%D0%BA-%D0%BA%D0%BB%D0%B8%D0%B5%D0%BD%D1%82-%D1%81%D0%B5%D1%80%D0%B2%D0%B5%D1%80%D0%BD%D0%BE%D0%B5-%D0%BF%D1%80%D0%B8%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5) 13 | - [Раздел 2.](#%D1%80%D0%B0%D0%B7%D0%B4%D0%B5%D0%BB-2) 14 | * [Тема 1. Жизненный цикл и модель серверной части веб-приложения.](#%D1%82%D0%B5%D0%BC%D0%B0-1-%D0%B6%D0%B8%D0%B7%D0%BD%D0%B5%D0%BD%D0%BD%D1%8B%D0%B9-%D1%86%D0%B8%D0%BA%D0%BB-%D0%B8-%D0%BC%D0%BE%D0%B4%D0%B5%D0%BB%D1%8C-%D1%81%D0%B5%D1%80%D0%B2%D0%B5%D1%80%D0%BD%D0%BE%D0%B9-%D1%87%D0%B0%D1%81%D1%82%D0%B8-%D0%B2%D0%B5%D0%B1-%D0%BF%D1%80%D0%B8%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F) 15 | * [Тема 2. Использование MVC архитектуры при разработке веб-приложений.](#%D1%82%D0%B5%D0%BC%D0%B0-2-%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5-mvc-%D0%B0%D1%80%D1%85%D0%B8%D1%82%D0%B5%D0%BA%D1%82%D1%83%D1%80%D1%8B-%D0%BF%D1%80%D0%B8-%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%BA%D0%B5-%D0%B2%D0%B5%D0%B1-%D0%BF%D1%80%D0%B8%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%B8%D0%B9) 16 | - [Раздел 3.](#%D1%80%D0%B0%D0%B7%D0%B4%D0%B5%D0%BB-3) 17 | * [Тема 1. Жизненный цикл и модель клиентской части веб-приложения.](#%D1%82%D0%B5%D0%BC%D0%B0-1-%D0%B6%D0%B8%D0%B7%D0%BD%D0%B5%D0%BD%D0%BD%D1%8B%D0%B9-%D1%86%D0%B8%D0%BA%D0%BB-%D0%B8-%D0%BC%D0%BE%D0%B4%D0%B5%D0%BB%D1%8C-%D0%BA%D0%BB%D0%B8%D0%B5%D0%BD%D1%82%D1%81%D0%BA%D0%BE%D0%B9-%D1%87%D0%B0%D1%81%D1%82%D0%B8-%D0%B2%D0%B5%D0%B1-%D0%BF%D1%80%D0%B8%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F) 18 | * [Тема 2. Обмен данными между клиентской и серверной частью.](#%D1%82%D0%B5%D0%BC%D0%B0-2-%D0%BE%D0%B1%D0%BC%D0%B5%D0%BD-%D0%B4%D0%B0%D0%BD%D0%BD%D1%8B%D0%BC%D0%B8-%D0%BC%D0%B5%D0%B6%D0%B4%D1%83-%D0%BA%D0%BB%D0%B8%D0%B5%D0%BD%D1%82%D1%81%D0%BA%D0%BE%D0%B9-%D0%B8-%D1%81%D0%B5%D1%80%D0%B2%D0%B5%D1%80%D0%BD%D0%BE%D0%B9-%D1%87%D0%B0%D1%81%D1%82%D1%8C%D1%8E) 19 | * [Тема 3. Использование архитектуры MVC при разработке клиентской части.](#%D1%82%D0%B5%D0%BC%D0%B0-3-%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5-%D0%B0%D1%80%D1%85%D0%B8%D1%82%D0%B5%D0%BA%D1%82%D1%83%D1%80%D1%8B-mvc-%D0%BF%D1%80%D0%B8-%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%BA%D0%B5-%D0%BA%D0%BB%D0%B8%D0%B5%D0%BD%D1%82%D1%81%D0%BA%D0%BE%D0%B9-%D1%87%D0%B0%D1%81%D1%82%D0%B8) 20 | * [Тема 4. Разработка RIA.](#%D1%82%D0%B5%D0%BC%D0%B0-4-%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%BA%D0%B0-ria) 21 | - [Раздел 4.](#%D1%80%D0%B0%D0%B7%D0%B4%D0%B5%D0%BB-4) 22 | * [Тема 1. Использование асинхронных веб-серверов.](#%D1%82%D0%B5%D0%BC%D0%B0-1-%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5-%D0%B0%D1%81%D0%B8%D0%BD%D1%85%D1%80%D0%BE%D0%BD%D0%BD%D1%8B%D1%85-%D0%B2%D0%B5%D0%B1-%D1%81%D0%B5%D1%80%D0%B2%D0%B5%D1%80%D0%BE%D0%B2) 23 | * [Тема 2. Разработка высоконагруженных веб-приложений.](#%D1%82%D0%B5%D0%BC%D0%B0-2-%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%BA%D0%B0-%D0%B2%D1%8B%D1%81%D0%BE%D0%BA%D0%BE%D0%BD%D0%B0%D0%B3%D1%80%D1%83%D0%B6%D0%B5%D0%BD%D0%BD%D1%8B%D1%85-%D0%B2%D0%B5%D0%B1-%D0%BF%D1%80%D0%B8%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%B8%D0%B9) 24 | * [Тема 3. Понятие REST.](#%D1%82%D0%B5%D0%BC%D0%B0-3-%D0%BF%D0%BE%D0%BD%D1%8F%D1%82%D0%B8%D0%B5-rest) 25 | 26 | 27 | 28 | ## [Раздел 1.](section-1/README.md) Архитектура веб-приложений 29 | 30 | ### Тема 1. Основные сведения о принципах функционирования веб-приложений. 31 | 32 | Понятие веб-браузера и HTTP сервера. Описание процесса взаимодействия между 33 | браузером и HTTP сервером. Понятие адресации в Web и понятие ресурса. Общее 34 | описание HTTP протокола. Описание HTTP методов. 35 | 36 | ### Тема 2. Базовая архитектура веб-приложения. 37 | 38 | Краткие сведения о HTML и CSS. Понятие запроса и ответа. Пример простейшего 39 | веб-приложения. Обработка HTML форм и общие понятия взаимодействия с 40 | пользователем. Отсутсвие состояния у веб-приложения. Понятие cookie и сессии. 41 | Общие сведения о генерации контента. 42 | 43 | ### Тема 3. Веб-приложение как клиент-серверное приложение. 44 | 45 | Веб-приложение как клиент-серверное приложение. Общие сведения о серверной 46 | части приложения. Общие сведения о клиентской части проложения. Принципы 47 | взаимодействия клиентской и серверной частей приложения. 48 | 49 | ## [Раздел 2.](section-2/README.md) Технологии разработки серверной части. 50 | 51 | ### Тема 1. Жизненный цикл и модель серверной части веб-приложения. 52 | 53 | Основные принципы обработки запросов и генерации ответов. Обработка HTTP 54 | методов. Валидация данных. Обработка ошибок. Маршрутизация запросов. 55 | Генерация контента и понятие шаблонизатора. 56 | 57 | ### Тема 2. Использование MVC архитектуры при разработке веб-приложений. 58 | 59 | Общие сведения о разработке веб-приложений с использование MVC архитектуры. 60 | Модель. Контроллер. Вид. Общие сведения о MVC-фрэймворках в PHP. Общие 61 | сведения о MVC-фрэймворках в .Net. 62 | 63 | ## [Раздел 3.](section-3/README.md) Технологии разработки клиентской части. 64 | 65 | ### Тема 1. Жизненный цикл и модель клиентской части веб-приложения. 66 | 67 | Использование HTML, CSS и JavaScript для разработки клиентской части 68 | веб-приложения. Общие сведения о вёрстке HTML. CSS-фрэймворки. DOM. 69 | JavaScript-фрэймворки и библиотеки. Валидация данных. Интерактивное 70 | взаимодействие с пользователем. Обработка ошибок. Ненавязчивый JavaScript. 71 | 72 | ### Тема 2. Обмен данными между клиентской и серверной частью. 73 | 74 | Общие сведения об обмене данными между клиентом и сервером. Обработка XML. 75 | Обработка JSON. 76 | 77 | ### Тема 3. Использование архитектуры MVC при разработке клиентской части. 78 | 79 | Динамическое формирование контента. JavaScript шаблонизаторы. Трактовка 80 | клиентской части веб-приложения как самостоятельного приложения. Использование 81 | MVC архитектуры для разработки клиентских приложений. JavaScript MVC 82 | фрэймворки. 83 | 84 | ### Тема 4. Разработка RIA. 85 | 86 | Понятие RIA. Интерактивный обмен данными. Понятие AJAX. 87 | 88 | ## [Раздел 4.](section-4/README.md) Специальные вопросы разработки веб-приложений. 89 | 90 | ### Тема 1. Использование асинхронных веб-серверов. 91 | 92 | Общие сведения о синхронных и асинхронных операциях. Общие сведения об 93 | асинхронных серверах и фрэймворках Node.ja, Tornado и Twisted. 94 | 95 | ### Тема 2. Разработка высоконагруженных веб-приложений. 96 | 97 | Общие концепции балансировки нагрузки на веб-приложения. Общие вопросы 98 | разработки масштабируемых веб-приложений. 99 | 100 | ### Тема 3. Понятие REST. 101 | 102 | Описание архитектуры REST и её основных концепций. Понятие ресурса. Общие 103 | сведения о разработке REST API. 104 | -------------------------------------------------------------------------------- /textbook/books-for-the-course.md: -------------------------------------------------------------------------------- 1 | # Books for the course 2 | 3 | ## JavaScript 4 | 5 | ## CSS 6 | 7 | - [CSS Secrets][verou] 8 | - _Better Solutions to Everyday Web Design Problems_ 9 | - book by Lea Verou 10 | - release date: June 2015 11 | - Is it still relevant in 2017? Yes, more than ever! 12 | - TK write review 13 | 14 | [verou]: http://shop.oreilly.com/product/0636920031123.do 15 | 16 | ## Node.js 17 | 18 | - [Web Development with Node and Express][brown] 19 | - _Leveraging the JavaScript Stack_ 20 | - book by Ethan Brown 21 | - release date: July 2014 22 | - TK is it still relevant? 23 | 24 | [brown]: http://shop.oreilly.com/product/0636920032977.do 25 | -------------------------------------------------------------------------------- /textbook/books-for-the-course.ru.md: -------------------------------------------------------------------------------- 1 | # Книги для курса 2 | 3 | ## JavaScript 4 | 5 | ## CSS 6 | 7 | - [Секреты CSS][verou-oz] 8 | - _Идеальные решения ежедневных задач [веб-дизайна]_ 9 | - Леа Веру (Lea Verou), 2016 10 | - язык оригинала: английский 11 | - оригинал вышел в июне 2015 12 | - Книга всё ещё актуальна в 2017? Да, больше, чем когда-либо! 13 | - TK написать рецензию 14 | 15 | [verou-oz]: https://oz.by/books/more10537570.html 16 | 17 | ## Node.js 18 | 19 | - [Веб-разработка с применением Node и Express][brown-oz] 20 | - _Полноценное использование стека JavaScript_ 21 | - Итан Браун (Ethan Brown), 2017 22 | - язык оригинала: английский 23 | - оригинал вышел в июле 2014 24 | - TK книга всё ещё актуальна? 25 | - [аннотация от издательства Питер][brown-piter] 26 | - TK прочитать для рецензии 27 | 28 | [brown-oz]: https://oz.by/books/more10537574.html 29 | [brown-piter]: https://habrahabr.ru/company/piter/blog/308316/ 30 | -------------------------------------------------------------------------------- /textbook/classes/materials.md: -------------------------------------------------------------------------------- 1 | # Материалы оставленные предыдущими курсами 2 | 3 | ## В формате шпоры 4 | 5 | * http://lexus-best-car.narod.ru/shpora.html 6 | 7 | Судя по косвенным указаниям, автор [Сергей Воронко](https://vk.com/voronkosergei), lexus_malman@mail.ru, курс 2012 года. 8 | 9 | * [Вопросы к экзамену.][milko-index] Posted on May 19, 2013 by Aliaksei Milko, курс 2013 года. 10 | 11 | [milko-index]: http://web.archive.org/web/20130612004713/http://milko.by/%D0%92%D0%BE%D0%BF%D1%80%D0%BE%D1%81%D1%8B-%D0%BA-%D1%8D%D0%BA%D0%B7%D0%B0%D0%BC%D0%B5%D0%BD%D1%83/ 12 | -------------------------------------------------------------------------------- /textbook/introduction/deployment.md: -------------------------------------------------------------------------------- 1 | - https://surge.sh/ 2 | - https://zeit.co/now 3 | -------------------------------------------------------------------------------- /textbook/introduction/javascript.md: -------------------------------------------------------------------------------- 1 | - hello world 2 | - different execution environments 3 | - browser 4 | - node.js 5 | - syntax 6 | - understanding 7 | - https://github.com/getify/You-Dont-Know-JS 8 | 9 | # Testing 10 | 11 | - https://mochajs.org/ 12 | -------------------------------------------------------------------------------- /textbook/outside.md: -------------------------------------------------------------------------------- 1 | # Материалы вне курса 2 | 3 | ## История веб-приложений в Беларуси 4 | 5 | * [История Байнета в датах](http://42.tut.by/181248) по состоянию на 2008 год 6 | * август 2000, Сергей Осипов и "Жужжальня" http://www.os.by/zzz/index.php?page=2099 7 | 8 |

Чуть ранее [15 июля 1999-го] появляется «Жужжальня» – форум на сайте Сергея Осипова (тогда – дизайн-студия Red Graphic). На длительное время он стал культовым местом для многих веб-дизайнеров и причастных к интернету людей.

— http://42.tut.by/181248
9 | 10 | 11 | * Ігар Трафімовіч, http://web.archive.org/web/20030608123126/http://www.unutranyholas.com/ 12 | 13 | ## Компьютерная газета, рубрика "интерент - вебмастеру" 14 | 15 | http://www.nestor.minsk.by/kg/abc/067.html 16 | -------------------------------------------------------------------------------- /textbook/section-1/README.md: -------------------------------------------------------------------------------- 1 | # [Раздел 1.](section-1/README.md) Архитектура веб-приложений 2 | 3 | ## [Тема 1.](chapter-1/README.md) Основные сведения о принципах функционирования веб-приложений 4 | 5 | Понятие веб-браузера и HTTP сервера. Описание процесса взаимодействия между 6 | браузером и HTTP сервером. Понятие адресации в Web и понятие ресурса. Общее 7 | описание HTTP протокола. Описание HTTP методов. 8 | 9 | ## [Тема 2.](chapter-2.md) Базовая архитектура веб-приложения. 10 | 11 | Краткие сведения о HTML и CSS. Понятие запроса и ответа. Пример простейшего 12 | веб-приложения. Обработка HTML форм и общие понятия взаимодействия с 13 | пользователем. Отсутсвие состояния у веб-приложения. Понятие cookie и сессии. 14 | Общие сведения о генерации контента. 15 | 16 | ## [Тема 3.](chapter-3/README.md) Веб-приложение как клиент-серверное приложение. 17 | 18 | Веб-приложение как клиент-серверное приложение. Общие сведения о серверной 19 | части приложения. Общие сведения о клиентской части проложения. Принципы 20 | взаимодействия клиентской и серверной частей приложения. 21 | 22 | --- 23 | 24 | # Понятия 25 | 26 | * веб 27 | * веб-браузер 28 | * веб-приложение 29 | * aрхитектура веб-приложений 30 | -------------------------------------------------------------------------------- /textbook/section-1/chapter-1/README.md: -------------------------------------------------------------------------------- 1 | # Тема 1. Основные сведения о принципах функционирования веб-приложений 2 | 3 | * Понятие веб-браузера и HTTP сервера. 4 | * Описание процесса взаимодействия между браузером и HTTP сервером. 5 | * Понятие адресации в Web и понятие ресурса. 6 | * Общее описание HTTP протокола. 7 | * Описание HTTP методов. 8 | 9 | ## Понятие веб-браузера и HTTP сервера 10 | 11 | Основные понятия: 12 | 13 | * понятие Интернет 14 | * понятие всемирной паутины (англ. World Wide Web), или *веб*. 15 | * понятие веб-браузера. 16 | * Понятие веб-сервера (HTTP сервера). 17 | 18 | ## Понятие адресации в Web и понятие ресурса 19 | 20 | * https://tools.ietf.org/html/rfc3986 21 | * https://tools.ietf.org/html/rfc7320 22 | 23 | ## Общее описание HTTP протокола 24 | 25 | * https://tools.ietf.org/html/rfc7230 26 | * http://blog.fraixed.es/2015/04/13/clarifying-my-mistake-get-requests-with-body/ 27 | * https://blogs.dropbox.com/developers/2015/03/limitations-of-the-get-method-in-http/ 28 | * https://news.ycombinator.com/item?id=9133469 29 | * https://lists.w3.org/Archives/Public/ietf-http-wg/2015AprJun/0262.html 30 | * http://dret.typepad.com/dretblog/2007/10/http-get-with-m.html 31 | * https://github.com/request/request/issues/1562 32 | 33 | ## Additional Resources 34 | 35 | - [Journey to HTTP/2](http://kamranahmed.info/blog/2016/08/13/http-in-depth/) 36 | 37 | In this article, author discussed what HTTP is, how it came to be, where it 38 | is today and how did we get here. 39 | -------------------------------------------------------------------------------- /textbook/section-1/chapter-1/browser/index-with-script.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |

Hello World

4 |

Every web application starts from a static HTML file.

5 |

Scripting is the thing which makes it interactive.

6 | 7 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /textbook/section-1/chapter-1/browser/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |

Hello World

4 |

Every web application starts from a static HTML file.

5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /textbook/section-1/chapter-1/http-server/server.js: -------------------------------------------------------------------------------- 1 | const http = require('http'); 2 | 3 | const server = http.createServer(handleRequest); 4 | 5 | function handleRequest(req, res) { 6 | 7 | } 8 | 9 | server.listen(8080); 10 | -------------------------------------------------------------------------------- /textbook/section-1/chapter-2.md: -------------------------------------------------------------------------------- 1 | # Тема 2. Базовая архитектура веб-приложения 2 | 3 | * Краткие сведения о HTML и CSS. 4 | * Понятие запроса и ответа. 5 | * Пример простейшего веб-приложения. 6 | * Обработка HTML форм и общие понятия взаимодействия с пользователем. 7 | * Отсутсвие состояния у веб-приложения. 8 | * Понятие cookie и сессии. 9 | * Общие сведения о генерации контента. 10 | 11 | ## Краткие сведения о HTML и CSS 12 | 13 | - смотрите https://github.com/grsu/css-intensive-course 14 | 15 | --- 16 | 17 | ## Дополнительные материалы 18 | 19 | ### Понятие cookie и сессии 20 | 21 | В современных браузерах понятие времени жизни сессии шире чем время жизни процесса. Сессионные 22 | cookie не всегда удаляются с выходом из браузера. 23 | 24 | * http://stackoverflow.com/questions/10617954/chrome-doesnt-delete-session-cookies 25 | * https://code.google.com/p/chromium/issues/detail?id=128513 26 | * https://productforums.google.com/forum/#!topic/chrome/9l-gKYIUg50/discussion 27 | -------------------------------------------------------------------------------- /textbook/section-1/chapter-2/html-history.md: -------------------------------------------------------------------------------- 1 | - https://www.w3.org/People/Raggett/book4/ch02.html 2 | - ref https://twitter.com/feross/status/854074747990278144 3 | - by [Dave Raggett](https://www.w3.org/People/Raggett/) 4 | -------------------------------------------------------------------------------- /textbook/section-1/chapter-3/README.md: -------------------------------------------------------------------------------- 1 | # Тема 3. Веб-приложение как клиент-серверное приложение 2 | 3 | * Веб-приложение как клиент-серверное приложение. 4 | * Общие сведения о серверной части приложения. 5 | * Общие сведения о клиентской части проложения. 6 | * Принципы взаимодействия клиентской и серверной частей приложения. 7 | 8 | ## Общие сведения о серверной части приложения 9 | 10 | Историческая перспектива: 11 | 12 | * [Common Gateway Interface (CGI)][cgi-wikipedia] 13 | * NSAPI from Netscape 14 | * [Server-side Java (SSJ)][ssj-1997] 15 | 16 | [cgi-wikipedia]: https://en.wikipedia.org/wiki/Common_Gateway_Interface 17 | [ssj-1997]: http://www.javaworld.com/article/2077634/java-web-development/how-to-get-started-with-server-side-java.html 18 | 19 | --- 20 | 21 | ## Архитектура 22 | 23 | Тренды: 24 | 25 | * Ruby on Rails -> Node.js 26 | * monolithic -> SOA 27 | 28 | 29 | * https://engineering.groupon.com/2013/node-js/geekon-i-tier/ -------------------------------------------------------------------------------- /textbook/section-1/web-progress.md: -------------------------------------------------------------------------------- 1 | > Mobile Web Progress gathers developers to preview what's coming to web technology. 2 | 3 | https://ti.to/samsunginternet/mwp2017 4 | 5 | > Through View Source events, Mozilla brings together visionary speakers and companies to explore new frontiers in the open web. 6 | 7 | https://viewsourceconf.org/berlin-2016/ 8 | -------------------------------------------------------------------------------- /textbook/section-2/README.md: -------------------------------------------------------------------------------- 1 | # Раздел 2. Технологии разработки серверной части. 2 | 3 | ## [Тема 1.](chapter-1/README.md) Жизненный цикл и модель серверной части веб-приложения 4 | 5 | Основные принципы обработки запросов и генерации ответов. Обработка HTTP 6 | методов. Валидация данных. Обработка ошибок. Маршрутизация запросов. 7 | Генерация контента и понятие шаблонизатора. 8 | 9 | ## [Тема 2.](chapter-2/README.md) Использование MVC архитектуры при разработке веб-приложений 10 | 11 | Общие сведения о разработке веб-приложений с использование MVC архитектуры. 12 | Модель. Контроллер. Вид. Общие сведения о MVC-фрэймворках в PHP. Общие 13 | сведения о MVC-фрэймворках в .Net. -------------------------------------------------------------------------------- /textbook/section-2/chapter-1/README.md: -------------------------------------------------------------------------------- 1 | # Разред 2. Тема 1. Жизненный цикл и модель серверной части веб-приложения 2 | 3 | * Основные принципы обработки запросов и генерации ответов. 4 | * Обработка HTTP методов. 5 | * Валидация данных. 6 | * Обработка ошибок. 7 | * Маршрутизация запросов. 8 | * Генерация контента и понятие шаблонизатора. 9 | 10 | ## Обработка ошибок 11 | 12 | * http://www.devthought.com/2011/12/22/a-string-is-not-an-error/ 13 | * `try` & `catch` 14 | * `callback(err, ...)` 15 | * `Promise#catch()` 16 | 17 | ## Генерация контента и понятие шаблонизатора 18 | 19 | * http://jade-lang.com/ 20 | -------------------------------------------------------------------------------- /textbook/section-2/chapter-1/error-handling.md: -------------------------------------------------------------------------------- 1 | # Why errors should be handled? 2 | 3 | Unhandled error may result in application crash, which would cause denial of 4 | service. It is a severe issue for server, as many clients would be denied of 5 | service at the same time. 6 | 7 | ## Example 8 | 9 | - https://github.com/ImageMagick/ImageMagick/issues/196 10 | - https://github.com/ImageMagick/ImageMagick/issues/352 11 | - https://github.com/ImageMagick/ImageMagick/commit/41e955984b034777903cfa61e500a0b922eb9cbd 12 | - https://launchpad.net/bugs/cve/CVE-2016-10062 13 | -------------------------------------------------------------------------------- /textbook/section-2/chapter-2/README.md: -------------------------------------------------------------------------------- 1 | # Тема 2. Использование MVC архитектуры при разработке веб-приложений 2 | 3 | ## Проблема 4 | 5 | Перед разработчиком стоят следующие проблемы: 6 | - как структурировать код: на какие компоненты разбивать? 7 | 8 | Желаемые качества 9 | - повысить возможность повторного использования 10 | - иметь возможность горизонтального масштабирования 11 | - упростить разработку 12 | - иметь возможность реализации новых требований 13 | 14 | ## Designing systems for change 15 | 16 | Additional reading: 17 | 18 | - [Using Design Pattern for Micro Level Software Design](http://www.delving.in/q4.pdf) 19 | 20 | ## Проблема, цель и назначение 21 | 22 | - цель в отделении бизнес-логики (модели) от её визуализации (представления) 23 | - повышается возможность повторного использования ([Википедия][mvc-ru-wiki]) 24 | - задачи 25 | - 26 | 27 | ## Основополагающие шаблоны проектирования 28 | 29 | - Mediator 30 | - Наблюдатель (Observer) 31 | - Команда (Command) 32 | - Стратегия 33 | - Компоновщик 34 | - для возможности однотипного обращения с подобъектами сложно-составного иерархического вида 35 | - Фабричный метод 36 | - позволит задать по умолчанию тип контроллера для соответствующего вида 37 | 38 | ## MVC (Model-View-Controller) 39 | 40 | Это ... 41 | - архитектура 42 | - схема использования нескольких шаблонов проектирования ([Википедия][mvc-ru-wiki]) 43 | - шаблон проектирования ([RSDN][rsdn-mvc]) 44 | - концепция ([Википедия][mvc-ru-wiki]) 45 | 46 | Составляющие части: 47 | - концепция 48 | - идея 49 | - элементы (Википедия) или компоненты? 50 | - роль каждого 51 | - конкретика связей между ними 52 | 53 | 54 | ## Модель (Model) 55 | 56 | - данные приложения ([RSDN][rsdn-mvc]) 57 | - объект 58 | - предоставляет данные предметной области представлению 59 | - реагирует на команды контроллера, изменяя свое состояние 60 | 61 | Модификации 62 | - пассивная модель 63 | - express реализует пассивную модель? см. _Наиболее частые ошибки_ в Википедии 64 | - активная модель 65 | - классическая реализация 66 | 67 | ## Представление (View) 68 | 69 | - пользовательский интерфейс ([RSDN][rsdn-mvc]) 70 | - отвечает за отображение данных предметной области (модели) пользователю, реагируя на изменения модели 71 | - также именуется _вид_ 72 | - представление **выбирает** нужный контроллер 73 | - Стратегия 74 | - шаблок команда (Command) 75 | 76 | ## Контроллер (Controller) 77 | 78 | - управляющая логика ([RSDN][rsdn-mvc]) 79 | - интерпретирует действия пользователя, оповещая модель о необходимости изменений 80 | - controller _manipulates_ or _notifies_ model? 81 | 82 | ## JSP model 2 architecture 83 | 84 | - https://en.wikipedia.org/wiki/JSP_model_2_architecture 85 | 86 | ## Model-View-ViewModel 87 | 88 | ## Model-View-Presenter 89 | 90 | ## Общие сведения о MVC-фрэймворках в node.js 91 | 92 | * connect 93 | * express 94 | * http://mcavage.me/node-restify/ 95 | 96 | * https://github.com/mcavage/node-restify 97 | * 98 | 99 | ### Sails.js | Realtime MVC Framework for Node.js 100 | 101 | ### Adonis - Nodejs MVC Framework 102 | 103 | ### Locomotive - Powerful MVC web framework for Node.js 104 | 105 | ### Geddy | The original MVC Web framework for Node 106 | 107 | - http://geddyjs.org/ 108 | 109 | ### Sleek.js | MVC Framework for Node.js 110 | 111 | ### Matador 112 | 113 | - https://github.com/Medium/matador 114 | 115 | ## Общие сведения о MVC-фреймворках для PHP 116 | 117 | - Laravel 118 | 119 | ## Laravel 120 | 121 | - https://en.wikipedia.org/wiki/Laravel 122 | - http://laravelbook.com/laravel-architecture/ 123 | - https://laravel.com/docs/5.2/lifecycle and others from _Architecture Foundations_ 124 | 125 | --- 126 | 127 | [mvc-ru-wiki]: https://ru.wikipedia.org/wiki/Model-View-Controller 128 | [rsdn-mvc]: http://rsdn.ru/?article/patterns/generic-mvc.xml 129 | 130 | ## Литература 131 | 132 | - [Scaling Isomorphic Javascript Code](http://blog.nodejitsu.com/scaling-isomorphic-javascript-code/) 133 | - о недостатках MVC и о решениях к которым подталкивает JavaScript, как язык способный исполняться и на клиенте и на сервере. 134 | - [Разделение визуализации и бизнес-логики][разделение-wikiversity] 135 | - рассматривается несостоятельность пассивной модели 136 | - http://nodeframework.com/ 137 | - ссылочно-справочный материал по фреймворкам для Node.js 138 | - http://www.isa.ru/jitcs/images/stories/2009/02/44_50.pdf 139 | 140 | [разделение-wikiversity]: https://ru.wikiversity.org/wiki/%D0%A0%D0%B0%D0%B7%D0%B4%D0%B5%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2%D0%B8%D0%B7%D1%83%D0%B0%D0%BB%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D0%B8_%D0%B8_%D0%B1%D0%B8%D0%B7%D0%BD%D0%B5%D1%81-%D0%BB%D0%BE%D0%B3%D0%B8%D0%BA%D0%B8 141 | -------------------------------------------------------------------------------- /textbook/section-3/README.md: -------------------------------------------------------------------------------- 1 | # Раздел 3. Технологии разработки клиентской части. 2 | 3 | ## [Тема 1.](chapter-1/README.md) Жизненный цикл и модель клиентской части веб-приложения. 4 | 5 | Использование HTML, CSS и JavaScript для разработки клиентской части 6 | веб-приложения. Общие сведения о вёрстке HTML. CSS-фрэймворки. DOM. 7 | JavaScript-фрэймворки и библиотеки. Валидация данных. Интерактивное 8 | взаимодействие с пользователем. Обработка ошибок. Ненавязчивый JavaScript. 9 | 10 | ## [Тема 2.](chapter-2/README.md) Обмен данными между клиентской и серверной частью. 11 | 12 | Общие сведения об обмене данными между клиентом и сервером. Обработка XML. 13 | Обработка JSON. 14 | 15 | ## [Тема 3.](chapter-3/README.md) Использование архитектуры MVC при разработке клиентской части. 16 | 17 | Динамическое формирование контента. JavaScript шаблонизаторы. Трактовка 18 | клиентской части веб-приложения как самостоятельного приложения. Использование 19 | MVC архитектуры для разработки клиентских приложений. JavaScript MVC 20 | фрэймворки. 21 | 22 | ## [Тема 4.](chapter-4/README.md) Разработка RIA. 23 | 24 | Понятие RIA. Интерактивный обмен данными. Понятие AJAX. 25 | 26 | --- 27 | 28 | ## Ресурсы 29 | 30 | 1. [A Baseline for Front-End [JS] Developers: 2015][baseline-for-frontend-devs] by Rebecca Murphey 31 | 32 | [baseline-for-frontend-devs]: http://rmurphey.com/blog/2015/03/23/a-baseline-for-front-end-developers-2015/ 33 | -------------------------------------------------------------------------------- /textbook/section-3/chapter-1/README.md: -------------------------------------------------------------------------------- 1 | # Тема 1. Жизненный цикл и модель клиентской части веб-приложения. 2 | 3 | * Использование HTML, CSS и JavaScript для разработки клиентской части 4 | веб-приложения. 5 | * Общие сведения о вёрстке HTML. 6 | * CSS-фреймворки. 7 | * DOM. 8 | * [JavaScript-фреймворки и библиотеки](js-frameworks.md) 9 | * Валидация данных. 10 | * Интерактивное взаимодействие с пользователем. 11 | * Обработка ошибок. 12 | * Ненавязчивый JavaScript. 13 | 14 | ## Использование HTML, CSS и JavaScript для разработки клиентской части веб-приложения 15 | 16 | HTML разметкой задаётся структура макета. С помощью CSS определяется представление и художественное оформление. JavaScript позволяет на основе декларативной структуры и стилей выстроить интерактивное поведение. 17 | 18 | Начать введение со среды, в которой работает клиентская часть. Объяснить суть подхода Mobile First. 19 | 20 |

I tried to make an "end credits" slide w/ IE-only APIs not in Project Spartan that scrolls while I talk. The list was so long it crashed PPT

— Jacob Rossi (@jacobrossi) March 24, 2015
21 | 22 |

Slides of my #mobilism presentation are online at http://t.co/5NfIO4bwrF

— Peter-Paul Koch (@ppk) March 27, 2015
23 | 24 | ### Размещение кода на HTML-странице 25 | 26 | * `javascript:` schema в URL, например `` 27 | * обработчик события (handler); 28 | * подстановка (entity) (в Microsoft Internet Explorer реализована в версиях от 5.X и выше); 29 | * вставка (контейнер SCRIPT). 30 | 31 | Разобрать http://www.javascript-spravka.ru/part/0/ как пример широко растиражированного документа, указать ссылки на первоисточники разработки каждого способа. 32 | 33 | ## Общие сведения о вёрстке HTML 34 | 35 | Рассмотреть различные подходы к вёрстке в исторической перспективе. 36 | 37 | * табличная (используя структуру таблицы с рядами и ячейками, ``, ``, `
`) 38 | * блочная (с заданием структы через блоки и их взаимное позиционирование, `
`) 39 | * flexbox 40 | 41 | Структура таблицы проста в визуальном понимании. Позволяет быстро построить макет. Но имеет ряд недостатков: 42 | 43 | * таблица отображается на экране только после разбора закрывающего тега `
`, что создаёт временную задержку в показе содержания 44 | * сложный макет с перекрывающимися элементами нереализуем в табличной вёрстке 45 | * таблица не позволяет произвести изменения визуальной компоновки в зависимости от размеров viewport 46 | 47 | Для самостоятельно изучения прочитать http://learnlayout.com/. 48 | 49 | Рассказать о viewport. 50 | 51 | ## CSS-фреймворки 52 | 53 |

CSS-фреймворки задумывались для того, чтобы помочь выполнить сложную CSS разметку проще. Использование фреймворков будет хорошей идеей лишь только в том случае, если фреймворки действительно делают то, что необходимо для вашего сайта. Они никогда не заменят необходимых знаний того, каким образом работает CSS.

— http://learnlayout.com/frameworks.html
54 | 55 |

CSS-фреймворк — фреймворк, созданный для упрощения работы верстальщика, быстроты разработки и исключения максимально возможного числа ошибок вёрстки (проблемы совместимости различных версий браузеров и т. д.).

— CSS-фреймворк
56 | 57 | ## DOM 58 | 59 | Интерфейс для программного доступа к структурированному документу, например HTML, XML или SVG. 60 | 61 | _Document Object Model_. 62 | 63 | Рассказать про [CSSOM](http://dev.w3.org/csswg/cssom/). _CSS Object Model_. 64 | 65 | ### Object Model 66 | 67 | DOM и CSSOM - два интерфейса позволяющих JS коду реализовывать интерактивное поведение. 68 | 69 | ## Ненавязчивый JavaScript. 70 | 71 | См. [Ненавязчивый JavaScript](https://ru.wikipedia.org/wiki/%D0%9D%D0%B5%D0%BD%D0%B0%D0%B2%D1%8F%D0%B7%D1%87%D0%B8%D0%B2%D1%8B%D0%B9_JavaScript). 72 | 73 | ### Генезис подхода 74 | 75 | * когда-то был в ходу термин Dynamic HTML (DHTML) 76 | * [Labels.js: A Re-Introduction to DHTML](http://web.archive.org/web/20020602111256/http://www.youngpup.net/?request=/articles/labels.xml) by [Aaron Boodman](http://www.aaronboodman.com/) at December 23, 2001 77 | * [Unobtrusive DHTML, and the power of unordered lists](http://web.archive.org/web/20021204224748/http://www.kryogenix.org/code/browser/aqlists/) by Stuart Langridge at November 2002 78 | 79 | ### О функционале и форме 80 | 81 | * http://bradfrost.com/blog/post/accessibility-and-low-powered-devices/ 82 | * http://blog.chriszacharias.com/page-weight-matters 83 | 84 | --- 85 | 86 | ## Ресурсы для самостоятельного изучения 87 | 88 | ### Конспект по курсу 2013 года 89 | 90 | * [Использование HTML, CSS и JavaScript для разработки клиентской части веб-приложения. Общие сведения о вёрстке HTML. CSS-фрэймворки](http://web.archive.org/web/20130613204421/http://milko.by/10-%D0%B2%D0%BE%D0%BF%D1%80%D0%BE%D1%81) 91 | * [DOM. JavaScript-фрэймворки и библиотеки. Валидация данных. Интерактивное взаимодействие с пользователем. Обработка ошибок](http://web.archive.org/web/20130613233109/http://milko.by/11-%D0%B2%D0%BE%D0%BF%D1%80%D0%BE%D1%81) 92 | 93 | ### Mobile First 94 | 95 | 1. [Mobile - Table of contents](http://www.quirksmode.org/mobile/) by Peter-Paul Koch 96 | 2. [Mobile First book](http://www.lukew.com/resources/mobile_first.asp) by Luke Wroblewski (October 2011) 97 | 98 | ### Viewport 99 | 100 | 1. [Surveying the viewport][] article by George Gooding (October 2014) 101 | 2. [Configuring the Viewport][] section in Safari Web Content Guide (привет из июня 2005). 102 | 2. [Using the viewport meta tag to control layout on mobile browsers][] at MDN. 103 | 3. [Configure the Viewport][] in the PageSpeed Insights at Google Developers. 104 | 4. [Что такое Viewport, как он работает и для чего вообще нужен][viewport-frontender] на frontender.com.ua. 105 | 5. [Device Adaptation](https://msdn.microsoft.com/en-us/library/ie/hh869463(v=vs.85).aspx) section at MSDN. 106 | 107 | [Surveying the viewport]: http://www.epinova.no/blog/george-gooding/dates/2014/10/surveying-the-viewport/ 108 | [Configuring the Viewport]: https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html 109 | [Using the viewport meta tag to control layout on mobile browsers]: https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag 110 | [Configure the Viewport]: https://developers.google.com/speed/docs/insights/ConfigureViewport 111 | [viewport-frontender]: http://frontender.com.ua/mobile-web/wtf-viewport/ 112 | 113 | ### Фрагментация платформы 114 | 115 | 1. [Фрагментация платформы](https://ru.wikipedia.org/wiki/%D0%A4%D1%80%D0%B0%D0%B3%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D0%B8%D1%8F_%D0%BF%D0%BB%D0%B0%D1%82%D1%84%D0%BE%D1%80%D0%BC%D1%8B) 116 | 2. http://quirksmode.org/presentations/Spring2015/chromia_mobilism.pdf 117 | 3. https://twitter.com/jacobrossi/status/581401099959209984?lang=en 118 | 119 | ## Инструментарий 120 | 121 | 1. [http://htmlpreview.github.io/](https://github.com/htmlpreview/htmlpreview.github.com) 122 | 123 | --- 124 | 125 | ## Термины 126 | 127 | * layout 128 | * page layout 129 | 130 |

Page layout is the part of graphic design that deals in the arrangement of visual elements on a page. It generally involves organizational principles of composition to achieve specific communication objectives.

— см. https://en.wikipedia.org/wiki/Page_layout
131 | 132 | * Web layout 133 | 134 | См. http://www.smashingmagazine.com/2013/08/29/innovative-appraoches-web-layout/ 135 | 136 | * CSS layout 137 | * HTML layout 138 | * 139 | -------------------------------------------------------------------------------- /textbook/section-3/chapter-1/beyond-css.md: -------------------------------------------------------------------------------- 1 | * https://dev.opera.com/articles/houdini/ 2 | -------------------------------------------------------------------------------- /textbook/section-3/chapter-1/css-in-details.md: -------------------------------------------------------------------------------- 1 | # Vendor prefixes 2 | 3 | - e.g. `-webkit-flex`, ``-moz-*`, `-o-*` 4 | - https://webkit.org/blog/6131/updating-our-prefixing-policy/ 5 | > WebKit’s new policy is to implement experimental features unprefixed, 6 | behind a runtime flag. 7 | - https://compat.spec.whatwg.org/ 8 | > This standard describes a collection of non-standard (and often 9 | vendor-prefixed) CSS properties and DOM APIs that web browsers need to 10 | support for compatibility with the de facto web. 11 | - https://wiki.mozilla.org/Compatibility/Mobile/Non_Standard_Compatibility 12 | 13 | Firefox 46 released with a lot of compatibility features for the de facto 14 | web. 15 | -------------------------------------------------------------------------------- /textbook/section-3/chapter-1/css/README.md: -------------------------------------------------------------------------------- 1 | - https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_mode 2 | 3 | ## Grid Layout 4 | 5 | - http://gridbyexample.com/examples/ 6 | -------------------------------------------------------------------------------- /textbook/section-3/chapter-1/js-frameworks.md: -------------------------------------------------------------------------------- 1 | # JavaScript-фреймворки и библиотеки 2 | 3 | * jQuery 4 | * [Backbone.js](http://backbonejs.org/) 5 | * [Ampersand.js](http://ampersandjs.com/) 6 | 7 | A highly modular, loosely coupled, non-frameworky framework for building advanced JavaScript apps. 8 | 9 | * React 10 | * Ember 11 | * Angular 12 | * Polymer 13 | * Knockout 14 | 15 | ## Историческая перспектива 16 | 17 | * http://dailyjs.com/history-of-javascript.html 18 | * https://teamgaslight.com/blog/ask-super-chris-what-is-the-history-of-javascript-frameworks 19 | * 20 | 21 | ## Prototype 22 | 23 | * https://en.wikipedia.org/wiki/Prototype_JavaScript_Framework 24 | 25 | ## jQuery 26 | 27 | * https://github.com/daniellmb/jquery-archive 28 | * [Annotated Version of the Original jQuery Release][annotated-jquery-original], April 7th, 2015 by John Resig 29 | 30 | [annotated-jquery-original]: http://ejohn.org/blog/annotated-version-of-the-original-jquery-release/ 31 | -------------------------------------------------------------------------------- /textbook/section-3/chapter-1/module-bundling.md: -------------------------------------------------------------------------------- 1 | # Webpack 2 | 3 | - https://webpack.js.org/guides/get-started/ 4 | 5 | # How we bundled modules before Webpack? 6 | 7 | - https://www.leanpanda.com/blog/2015/06/28/amd-requirejs-commonjs-browserify/ 8 | - we used browserify 9 | - http://esa-matti.suuronen.org/blog/2013/03/22/journey-from-requirejs-to-browserify/ 10 | - we used _require.js_ 11 | - http://j-query.blogspot.com.by/2015/06/from-requirejs-to-webpack-part-1-reasons.html 12 | - https://gist.github.com/xjamundx/b1c800e9282e16a6a18e 13 | -------------------------------------------------------------------------------- /textbook/section-3/chapter-1/module-bundling.ru.md: -------------------------------------------------------------------------------- 1 | # Webpack 2 | 3 | - Скринкаст о Webpack от Ильи Кантора 4 | - https://learn.javascript.ru/screencast/webpack 5 | - записан для webpack 1.x 6 | - https://habrahabr.ru/post/309306/ 7 | - объясняет Webpack через Bower и Grunt, что сложно и несёт ненужный "багаж" 8 | -------------------------------------------------------------------------------- /textbook/section-3/chapter-2/README.md: -------------------------------------------------------------------------------- 1 | # Тема 2. Обмен данными между клиентской и серверной частью 2 | 3 | * Общие сведения об обмене данными между клиентом и сервером. 4 | * Обработка XML. 5 | * Обработка JSON. 6 | 7 | ## Общие сведения об обмене данными между клиентом и сервером 8 | 9 | * рассказать о HTTP и `Content-Type` 10 | * WebSocket 11 | * https://en.wikipedia.org/wiki/Server-sent_events 12 | * WebRTC 13 | 14 | ## Обработка XML 15 | 16 | * [Parsing and serializing XML](https://developer.mozilla.org/en-US/docs/Web/Guide/Parsing_and_serializing_XML) 17 | 18 | ## Обработка JSON 19 | 20 | - [JSON.parse() / JSON.stringify()][MDN-JSON] 21 | - https://github.com/benjamine/jsondiffpatch 22 | 23 | [MDN-JSON]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON 24 | 25 | ## Построение API 26 | 27 | * http://jsonapi.org/ 28 | * HAL, https://en.wikipedia.org/wiki/Hypertext_Application_Language 29 | 30 | --- 31 | 32 | ## Ресурсы для самостоятельного изучения 33 | 34 | ### Конспект по курсу 2013 года 35 | 36 | * [Общие сведения об обмене данными между клиентом и сервером. Обработка XML. Обработка JSON.](http://web.archive.org/web/20130612083818/http://milko.by/13-%D0%B2%D0%BE%D0%BF%D1%80%D0%BE%D1%81/) 37 | -------------------------------------------------------------------------------- /textbook/section-3/chapter-3/README.md: -------------------------------------------------------------------------------- 1 | # Раздел 3. Тема 3. Использование архитектуры MVC при разработке клиентской части 2 | 3 | * Динамическое формирование контента. 4 | * JavaScript шаблонизаторы. 5 | * Трактовка клиентской части веб-приложения как самостоятельного приложения. 6 | * Использование MVC архитектуры для разработки клиентских приложений. 7 | * JavaScript MVC фрэймворки. 8 | 9 | --- 10 | 11 | ## JavaScript шаблонизаторы 12 | 13 | - [JSX][jsx.md] 14 | 15 | ## Архитектура Flux 16 | 17 | Сделать обзор: 18 | 19 | * http://fluxxor.com/what-is-flux.html 20 | * http://www.infoq.com/news/2014/05/facebook-mvc-flux 21 | 22 | * reddit on [Facebook: MVC Does Not Scale, Use Flux Instead][reddit-flux-scale] 23 | 24 | * https://medium.com/@amix3k/flux-vs-mvc-design-patterns-57b28c0f71b7 25 | * https://medium.com/brigade-engineering/what-is-the-flux-application-architecture-b57ebca85b9e 26 | * https://egghead.io/articles/gentle-introduction-to-the-react-flux-architecture 27 | 28 | [reddit-flux-scale]: http://www.reddit.com/r/programming/comments/25nrb5/facebook_mvc_does_not_scale_use_flux_instead/ 29 | -------------------------------------------------------------------------------- /textbook/section-3/chapter-3/jsx.md: -------------------------------------------------------------------------------- 1 | > An important thing to know about JSX is that it isn't a templating language 2 | > like Spacebars or Angular - it actually compiles directly to regular 3 | > JavaScript. Read more about JSX in the React docs. 4 | > 5 | > -- https://www.meteor.com/tutorials/react/components 6 | -------------------------------------------------------------------------------- /textbook/section-3/chapter-4/README.md: -------------------------------------------------------------------------------- 1 | # Разработка RIA 2 | 3 | _Раздел 3. Тема 4._ 4 | 5 | * Понятие RIA. 6 | * Интерактивный обмен данными. 7 | * Понятие AJAX. 8 | 9 | ## Понятие RIA 10 | 11 | * https://en.wikipedia.org/wiki/Rich_Internet_application 12 | 13 | Историческая справка: 14 | 15 | * год 2002, _Macromedia Flash MX was built from the ground up to provide a ‘rich client’ environment for Internet content and applications that will radically improve the quality of end-user applications, [...]._ [Macromedia Flash MX—A next-generation rich client][flash-mx] 16 | 17 | [flash-mx]: http://download.macromedia.com/pub/flash/whitepapers/richclient.pdf 18 | -------------------------------------------------------------------------------- /textbook/section-3/chapter-4/history-pushstate.md: -------------------------------------------------------------------------------- 1 | # History API 2 | 3 | - https://developer.mozilla.org/en-US/docs/Web/API/History_API 4 | 5 | # Using `pushState` API for client-side routing 6 | 7 | - any article would be ok, search for _pushState client routing_ 8 | - e.g. http://krasimirtsonev.com/blog/article/deep-dive-into-client-side-routing-navigo-pushstate-hash 9 | 10 | # Pushstate server supporting single-page-application 11 | 12 | - standalone server https://github.com/scottcorgan/pushstate-server 13 | - webpack-dev-server` and its `historyApiFallback` option 14 | - https://webpack.js.org/configuration/dev-server/#devserver-historyapifallback 15 | 16 | # Examples 17 | 18 | - applications which doesn't persist state in URL 19 | - https://raspisanie.grsu.by/TimeTable/UMUTeachers.aspx 20 | - note Print function 21 | - https://raspisanie.grsu.by/Print/UMUTeachers.aspx?arg0=121299&date=10.04.2017%2000:00:00 22 | -------------------------------------------------------------------------------- /textbook/section-3/chapter-4/service-workers.md: -------------------------------------------------------------------------------- 1 | # Basics: Worker 2 | 3 | - https://www.html5rocks.com/en/tutorials/workers/basics/ 4 | 5 | # Service Worker 6 | 7 | - https://developers.google.com/web/fundamentals/getting-started/primers/service-workers 8 | - https://jakearchibald.github.io/isserviceworkerready/ 9 | 10 | ## API 11 | 12 | - https://developer.mozilla.org/en-US/docs/Web/API/ExtendableEvent/waitUntil 13 | - https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerGlobalScope 14 | 15 | ## Offline case for `mobile-osm` project 16 | 17 | - https://github.com/pub-t/mobile-osm/compare/service-worker 18 | 19 | ## Messaging 20 | 21 | - https://googlechrome.github.io/samples/service-worker/post-message/ 22 | 23 | ## Push 24 | 25 | - https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerGlobalScope/onpush 26 | - see Cookbook below, expecially Push Payload and Push Simple 27 | 28 | ## Cookbook 29 | 30 | - https://serviceworke.rs/ 31 | -------------------------------------------------------------------------------- /textbook/section-4/README.md: -------------------------------------------------------------------------------- 1 | # Специальные вопросы разработки веб-приложений 2 | 3 | _Раздел 4._ 4 | 5 | ## [Тема 1.](chapter-1/README.md) Использование асинхронных веб-серверов 6 | 7 | Общие сведения о синхронных и асинхронных операциях. Общие сведения об 8 | асинхронных серверах и фрэймворках Node.ja, Tornado и Twisted. 9 | 10 | ## [Тема 2.](chapter-2/README.md) Разработка высоконагруженных веб-приложений 11 | 12 | Общие концепции балансировки нагрузки на веб-приложения. Общие вопросы 13 | разработки масштабируемых веб-приложений. 14 | 15 | ## [Тема 3.](chapter-3/README.md) Понятие REST 16 | 17 | Описание архитектуры REST и её основных концепций. Понятие ресурса. Общие 18 | сведения о разработке REST API. 19 | -------------------------------------------------------------------------------- /textbook/section-4/chapter-1/README.md: -------------------------------------------------------------------------------- 1 | # Использование асинхронных веб-серверов 2 | 3 | _Раздел 4. Тема 1._ 4 | 5 | * Общие сведения о синхронных и асинхронных операциях. 6 | * Общие сведения об асинхронных серверах и фреймворках Node.js, Tornado и Twisted. 7 | 8 | ## Общие сведения о синхронных и асинхронных операциях 9 | 10 | * https://en.wikipedia.org/wiki/Asynchronous_I/O 11 | * https://en.wikipedia.org/wiki/Event-driven_programming 12 | * https://en.wikipedia.org/wiki/Event_loop 13 | 14 | ## Общие сведения об асинхронных серверах и фреймворках Node.js, Tornado и Twisted 15 | 16 | * http://www.tornadoweb.org/en/stable/ 17 | * https://twistedmatrix.com/trac/ 18 | 19 | --- 20 | 21 | Сделать обзор: 22 | 23 | * https://xakep.ru/2015/02/21/python-tornado/ 24 | * https://toster.ru/q/51432 25 | * http://habrahabr.ru/post/128772/ 26 | -------------------------------------------------------------------------------- /textbook/section-4/chapter-2/README.md: -------------------------------------------------------------------------------- 1 | # Разработка высоконагруженных веб-приложений 2 | 3 | _Раздел 4. Тема 2._ 4 | 5 | * Общие концепции балансировки нагрузки на веб-приложения. 6 | * Общие вопросы разработки масштабируемых веб-приложений. 7 | 8 | ## Общие концепции балансировки нагрузки на веб-приложения 9 | 10 | --- 11 | 12 | Сделать обзор: 13 | 14 | * http://citforum.ru/internet/webservers/web_cluster/ 15 | * http://citforum.ru/internet/webservers/websbal.shtml 16 | 17 | --- 18 | 19 | ## Общие вопросы разработки масштабируемых веб-приложений 20 | 21 | * http://ruhighload.com/scale 22 | 23 | --- 24 | 25 | На обзор: 26 | 27 | * http://habrahabr.ru/post/113992/ 28 | 29 | --- 30 | -------------------------------------------------------------------------------- /textbook/section-4/chapter-3/README.md: -------------------------------------------------------------------------------- 1 | # Понятие REST 2 | 3 | _Разделл 4. Тема 3._ 4 | 5 | * Описание архитектуры REST и её основных концепций. 6 | * Понятие ресурса. 7 | * Общие сведения о разработке REST API. 8 | 9 | ## Описание архитектуры REST и её основных концепций 10 | 11 | * [Architectural Styles and the Design of Network-based Software Architectures][fielding] 12 | * _The World Wide Web has succeeded in large part because its software architecture has been designed to meet the needs of an Internet-scale distributed hypermedia system. The Web has been iteratively developed over the past ten years through a series of modifications to the standards that define its architecture. In order to identify those aspects of the Web that needed improvement and avoid undesirable modifications, a model for the modern Web architecture was needed to guide its design, definition, and deployment._ 13 | * REST придаёт особое значение (см. _Abstract of the Dissertation_) 14 | * масштабируемости взаимодействий между компонентами (scalability of component interactions), 15 | * общности интерфейсов (generality of interfaces), 16 | * независимому размещению компонентов (independent deployment of components), 17 | * and intermediary components to reduce interaction latency, enforce security, and encapsulate legacy systems. 18 | * Introduction 19 | * _[...] consider how often we see software projects begin with adoption of the latest fad in architectural design, and only later discover whether or not the system requirements call for such an architecture. Design-by-buzzword is a common occurrence. At least some of this behavior within the software industry is due to a lack of understanding of why **a given set of architectural constraints is useful**._ 20 | 21 | [fielding]: https://www.ics.uci.edu/~fielding/pubs/dissertation/top.htm 22 | 23 | --- 24 | 25 | Книги по REST: 26 | 27 | * [REST API Design Rulebook](http://shop.oreilly.com/product/0636920021575.do) 28 | 29 | --- 30 | 31 | ## SOA 32 | 33 | * http://stackoverflow.com/questions/10105093/service-oriented-architecture-suggestions 34 | 35 | ## JSON API 36 | 37 | * http://jsonapi.org/ 38 | --------------------------------------------------------------------------------