Современная WEBразработка https: //vk. com/saratovjs Михаил Семичев Team Lead в EPAM Systems Mikhail_Semichev@epam. com https: //vk. com/saratovjs 1
FRONT-END РАЗРАБОТКА WEB https: //vk. com/saratovjs Confidential 2 2
ОШИБОЧНОЕ ПРЕДСТАВЛЕНИЕ, ЧТО WEB - ЭТО 1991 https: //vk. com/saratovjs Confidential 3 3
https: //vk. com/saratovjs Confidential 4 4
HTML 5 <video></video> <audio></audio> <canvas></canvas> CSS 3 SVG Browser storages Web sockets Geolocation https: //vk. com/saratovjs Confidential 5 5
3 D В БРАУЗЕРЕ https: //vk. com/saratovjs Confidential 6 6
ВЫЧИСЛИТЕЛЬНЫЕ МОЩНОСТИ https: //vk. com/saratovjs Confidential 7 7
https: //vk. com/saratovjs 8
https: //vk. com/saratovjs 9
DEAD TRIGGER 2 (UNITY 3 D) https: //vk. com/saratovjs Confidential 10 10
КРОСС-ПЛАТФОРМЕННОСТЬ https: //vk. com/saratovjs Confidential 11 11
SECTION 2. МОБИЛЬНАЯ РАЗРАБОТКА https: //vk. com/saratovjs Confidential 12 12
WEB VIEW Web. View https: //vk. com/saratovjs 13
IONIC https: //vk. com/saratovjs 14
REACT NATIVE https: //vk. com/saratovjs 15
РЕАЛЬНО NATIVE ПРИЛОЖЕНИЕ https: //vk. com/saratovjs 16
SECTION 3. МАСШТАБЫ WEB https: //vk. com/saratovjs Confidential 17 17
САМЫЕ ПОПУЛЯРНЫЕ IT-БРЕНДЫ https: //vk. com/saratovjs Confidential 18 18
МАСШТАБЫ Саратов население 842 тыс. чел В интернете 1 млрд WEB-сайтов! Facebook 1 млрд чел/день! Facebook посещает 1 187 населений Саратова/день Google Searches 4+ млрд запросов/день Доходы Google за 2014 год = $ 66 млрд = 4 600 млрд руб Доходы гугл выдать на каждого жителя – 5. 5 млн руб. https: //vk. com/saratovjs Confidential 19 19
SECTION 4. ТЕХНОЛОГИИ И ИХ ПРИМЕНЕНИЕ https: //vk. com/saratovjs Confidential 20 20
КАК ВСЕМУ ЭТОМУ НАУЧИТЬСЯ • • • UX/Design HTML CSS Java. Script j. Query Angular. JS/React. JS HTTP + AJAX ASP. NET / Node. JS / Web. Api / REST Gulp https: //vk. com/saratovjs Confidential 21 21
UX / СОЗДАНИЕ МАКЕТОВ https: //vk. com/saratovjs Confidential 22 22
HTML https: //vk. com/saratovjs Confidential 23 23
WEB COMPONENTS https: //vk. com/saratovjs 24
POLYMER 1. 0 FROM GOOGLE https: //vk. com/saratovjs 25
CSS https: //vk. com/saratovjs Confidential 26 26
CSS 3 АДАПТИВНЫЙ ДИЗАЙН (MEDIA QUERY) https: //vk. com/saratovjs Confidential 27 27
Как писать качественно? https: //docs. google. com/document/d/1 XBAn. S 0 Jj. Hwxz 92 y 1 KOr 8 Nk 2 Md. Dd. OMEa. Uc. Hcr-y. NEGM/edit# Ресеты стилей - reset. css, normalize. css Фреймворки - Bootstrap, Google Material Design Методологии - OOCSS, Atomic CSS, SMACSS, BEM CSS препроцессоры - SCSS, LESS, Stylus Постпроцессоры - Post. CSS https: //vk. com/saratovjs 28
CSS ПРЕПРОЦЕССОРЫ • • • Вложение сел. Переменные Операции Функции Миксины Import файлов https: //vk. com/saratovjs 29
Структурирование CSS https: //vk. com/saratovjs 30
SCSS Project Version gulpfile. js var gulp = require('gulp'); var sass = require('gulp-sass'); var scss. Files. Path = '. /scss/**/*. scss'; gulp. task('scss', function () { gulp. src(scss. Files. Path). pipe(sass(). on('error', sass. log. Error)). pipe(gulp. dest('. /css')); }); gulp. task('scssw', function () { gulp. watch(scss. Files. Path, ['scss']); }); npm init npm install gulp –g npm install gulp –-save-dev npm install gulp-sass --save-dev https: //vk. com/saratovjs 31
Статистика использования препроцессоров https: //vk. com/saratovjs 32
POST Processors • • Autoprefixer Post. CSS Rework Pleeease • • добавление вендорных префиксов (Can I Use) CSS 3 фолбеки для rem Фильтры для IE rgba в hex упаковывает кучу media queries в 1 минификация генерация sourcemaps 232 плагина ! https: //vk. com/saratovjs 33
JAVASCRIPT + JQUERY Java. Script https: //vk. com/saratovjs Confidential 34 34
ECMASCRIPT 6 traceur: 1. 18 s es 6 -transpiler: 2. 03 s babel : 5. 03 s Compile js for 84 pages https: //vk. com/saratovjs Confidential 35 35
НОВЫЙ JAVASCRIPT https: //vk. com/saratovjs 36
JAVASCRIPT IS THE INTERNET ! https: //vk. com/saratovjs Confidential 37 37
https: //vk. com/saratovjs 38
https: //vk. com/saratovjs 39
КАК ЗАДУМЫВАЛОСЬ https: //vk. com/saratovjs Confidential 40 40
В ПРОЦЕССЕ РАЗРАБОТКИ… https: //vk. com/saratovjs Confidential 41 41
ЯВАСКРИПТ ФРЕЙМВОРКИ VS https: //vk. com/saratovjs Confidential 42 42
ПОПУЛЯРНОСТЬ ФРЕЙМВОРКОВ https: //vk. com/saratovjs Confidential 43 43
HTTP ASP. NET Spring MVC JAVA HTML CSS Java. Script Images Internet https: //vk. com/saratovjs Confidential 44 44
AJAX Web. Api/REST JSON Internet https: //vk. com/saratovjs Confidential 45 45
WEB SOCKETS Bi-directional Full-duplex Single TCP Connection https: //vk. com/saratovjs 46
SECTION 5. ВЫСОКОЕ КАЧЕСТВО РАЗРАБОТКИ https: //vk. com/saratovjs Confidential 47 47
СРЕДЫ РАЗРАБОТКИ https: //vk. com/saratovjs Confidential 48 48
СТАТИЧЕСКИЙ АНАЛИЗ КАЧЕСТВА КОДА JSLint => JSHint => ESLint https: //vk. com/saratovjs Confidential 49 49
ЮНИТ ТЕСТЫ https: //vk. com/saratovjs Confidential 50 50
Code coverage analytics https: //vk. com/saratovjs 51
END-2 -END ТЕСТИРОВАНИЕ https: //vk. com/saratovjs Confidential 52 52
СБОРКА ПРОЕКТА И ОПТИМИЗАЦИЯ https: //vk. com/saratovjs Confidential 53 53
FE build process (GULP) SCSS Angular. JS + ES 6 compile to CSS 3 auto-prefix concat uncss minify versioning cdn compile to ES 5 JS eslint unit-tests concat minify versioning cdn Protractor Tests min CSS Angular. JS pages templates Images JS index. html https: //vk. com/saratovjs 54
Scalable WEB application architecture ESB Server Session Cache BL ASP. NET index. html Web. Api AJAX JSON CDN CDN css js images Client Angular. JS https: //vk. com/saratovjs 55
Front-End Technologies https: //vk. com/saratovjs 56
Спасибо за внимание! https: //vk. com/saratovjs Михаил Семичев Team Lead в EPAM Systems Mikhail_Semichev@epam. com https: //vk. com/saratovjs 57
Скачать презентацию Современная WEBразработка https vk com saratovjs Михаил Семичев Team
Современная WEB разработка Meetup.pptx