Downloaded 21 times
Uploaded byОлег Шерыхалин
Full Stack разработка на JavaScript
Документ представляет собой обзор разработки веб-приложений с использованием JavaScript, включая различные архитектурные подходы, такие как Ajax и Single Page Application (SPA). Он охватывает основы JavaScript и его особенности, а также фреймворки и инструменты для написания клиентских и серверных приложений. В документе также перечислены ресурсы для обучения и рекомендации по использованию различных технологий, таких как Node.js и AngularJS.
Full Stack разработка на JavaScript
- 1. Full Stack разработка на JavaScript
- 2. Архитектура веб–приложений ТРАДИЦИОННЫЕ AJAX SPA 1995 2000 2005 2010
- 3. Архитектура веб–приложений TheOld School КЛИЕНТ ВЕБ–СЕРВЕР просто HTML... HTML ГЕНЕРАЦИЯ HTML ОБРАБОТКА ДАННЫХ БАЗА ДАННЫХ
- 4. Архитектура веб–приложений AJ A X КЛИЕНТ ВЕБ–СЕРВЕР HTML + JavaScript HTML ГЕНЕРАЦИЯ HTML ОБРАБОТКА ДАННЫХ БАЗА ДАННЫХ ГЕНЕРАЦИЯ HTML ГЕНЕРАЦИЯ HTML HTML HTML
- 5. Архитектура веб–приложений SINGLEPAGE APPLICATION КЛИЕНТ ВЕБ–СЕРВЕР JavaScript JavaScript JavaScript JavaScript JavaScript JavaScript ОБРАБОТКА ДАННЫХ БАЗА ДАННЫХ ПРОСТО JSON JSON ПРОСТО JSON ПРОСТО JSON JSON JSON
- 6. Архитектура веб–приложений SPA= MVC + JSON + REST CONTROLLER VIEW MODEL { event: 'встреча', date: '2014-10- 30', who: 'UfaDevCom' } HTTP GET HTTP POST HTTP PUT HTTP DELETE
- 7. Коротко о JavaScript Для тех, кто только что с бронепоезда Простой синтаксис, похож на C, Java Автоматическое приведение типов Автоматическая сборка мусора ООП без классов – прототипное наследование
- 8. Коротко о JavaScript Асинхронность: удивительные вещи for(var i=0; i<3; i++){ setTimeout(function(){ console.log(i); }, 0); }
- 9. Ресурсы для изучения С чего начать? Илья Кантор, Современный учебник JavaScript http://learn.javascript.ru Самоучитель HTML. Самоучитель CSS http://htmlbook.ru
- 10. Ресурсы для изучения Полезные книги
- 11. Пишем клиент Зачемнужен фреймворк? 1.Грамотная структура приложения 2.Уже готовые типовые решения 3.Легко понять чужой код
- 12. Пишем клиент CSS–фреймворки B Bootstrap бывший Twitter Bootsrap Быстро накидать прототип интерфейса Готовая адаптивность для всех экранов Огромный выбор готовых дизайнов
- 13. Пишем клиент Шаблонизаторы:из JSON в HTML шаблон: <div> <h1>{{title}}</h1> <div> {{body}} </div> </div> Главное: мухи отдельно, котлеты отдельно т.е. JavaScript и HTML наш JSON: { title: 'Lorem Ipsum', body: 'Dolores sit amet' } результат: <div> <h1>Lorem Ipsum</h1> <div> Dolores sit amet </div> </div>
- 14. Пишем клиент JQuery:работа с DOM Отличная книга, бесплатно: $("body" ).html( "Hello, World!" ); Вообще–то необязательно, но с ним проще Огромный парк готовых велосипедов
- 15. Пишем клиент Mostpopular JavaScript frameworks
- 16. Пишем клиент Backbone.js– простенько и со вкусом Необходимый минимум: – Router – View – Model – Collection Относительно легко изучить Много книг, статей, примеров Отличная книга, рекомендую:
- 17. Пишем клиент КогдаBackone мало... Плагины и библиотеки Проблема: Backbone слишком примитивен... Доступно несколько сотен плагинов, дополняющих функционал Backbone: – биндинг – валидация – Local Storage и другие...
- 18. Пишем клиент Следующаяостановка: AngularJS AngularJS комплексный фреймворк: – поддержка модулей и зависимостей – встроенный шаблонизатор – биндинг и валидация – иерархические представления – средства unit–тестирования
- 19. Пишем сервер node.js:асинхронность – главное оружие Компиляция JavaScript в машинный код Работа с файлами и базами данных Неблокирующий ввод/вывод var http = require('http'); // простейший веб–сервер http.createServer(function (req, res) { res.writeHead(200, {'Content-Type': 'text/plain'}); res.end('Hello Worldn'); }).listen(1337, '127.0.0.1');
- 20. Пишем сервер фреймворки,библиотеки, шаблонизаторы MVC фреймворки: Express, Sails.js REST фреймворки: Restify Шаблонизаторы: Jade, Hadlebars Работа с БД: mysql, mongoose и многие, многие другие...
- 21. Пишем мобильное приложение От сайта для мобильных к мобильному приложению мобильный браузер модуль WebView страница HTML+CSS +JavaScript мобильное приложение модуль WebView страница HTML+CSS +JavaScript
- 22. Пишем мобильное приложение PhoneGap Accelerometer Camera Compass GeoLocation Notification Contacts Files Network Storage Media
- 23. Инструменты разработки Хорошемутанцору не помешает... Sublime text
- 24. Что дальше? О,сколько нам открытий чудных... Синтаксический сахар: От JavaScript к CoffeeScript Изоморфные фреймворки: Meteor.js, React.js Лучший CSS: LESS, SASS Инструменты сборки: grunt, gulp, bower
- 25. Олег Шерыхалин o.sherykhalin@gmail.com +7 9174277702 Skype: o.sherykhalin