Санкт-Петербург, 2015 год

Экскурс в мир WEB разработки

Лаабе Дмитрий, IT-Доминанта

Немного о себе…

1. Опыт в ИТ – 19 лет

2. Преподавание ИТ в СПбГПУ («Политех») – 7 лет

3. Более 10-ти авторских курсов в области WEB разработки

4. Руководство рекрутинговой компанией в сфере ИТ – 10 лет

5. Подготовка ИТ рекрутеров – 8 лет

Что нужно знать рекрутеру о разработке ПО

1. Базовые понятия

2. Связи между ними

3. Привязку конкретных технологий к базовым понятиям

4. Архитектуру разрабатываемых систем

Что НЕ нужно знать рекрутеру о разработке ПО

1. Синтаксис языка JavaScript

2. Основные настройки WEB сервера

3. …

Базовые понятия: архитектура ПО

1. Одноуровневая: desktop приложение

2. Двухуровневая: клиент-серверное приложение

3. Трехуровневая: клиент-серверное приложение + база

данных

4. Многоуровневая: сложные системы с цепочками вызовов

Базовые понятия: клиент-серверное взаимодействие

Сервер - компьютер (или специальное компьютерное оборудование), выполняющий определенные сервисные функции

Клиент – компьютер отправляющий запросы серверу ответ

запрос

Клиент-серверное ПО

Примеры серверного ПО (Back End):

1. WEB серверы (выдача HTML страниц): MS IIS, Apache, nginx и т. д.

2. FTP серверы (выдача файлов): FTP службы ОС, FileZilla server и т.д.

3. SMTP(почтовые) серверы: MS Exchange, SendMail,

4. И т.д.

Примеры клиентского ПО (Front End):

1. WEB клиенты: Internet Explorer, Google Chrome, Mozilla FireFox и т.д.

2. FTP клиенты: Cute FTP

3. Почтовые клиенты: MS Outlook, The Bat

1. Серверное ПО – ПО обеспечивающее обработку запросов от клиентов в

рамках некоторого сервиса

2. Клиентское ПО – ПО взаимодействующее с пользователем, отправляющее

запросы на сервер и принимающее ответы от него

Базовые понятия: Протоколы

Сетевой протокол — набор правил и действий, позволяющий осуществлять обмен данными между включёнными в сеть устройствами.

TCP/IP –транспортно-сетевой,

HTTP, FTP, SMTP - прикладной

7-ми уровневая модель ISO OSI

Службы Интернет

Популярные службы:

• World Wide Web

• ICQ

• Skype

• FTP

• Telnet

• И др.

Служба Интернет – серверное ПО, работающее в Интернет.

Архитектура WEB приложений

WEB приложение – частный случай 3-х уровневой архитектуры приложения

WEB браузер (тонкий клиент)

WEB сервер Сервер БД

JavaScript Developer, Front End Developer

PHP Developer, Java Developer, Ruby Developer

DB Developer (SQL)

Служба World Wide Web

Служба WWW: обработка запросов

WEB хостинг: панель управления хостингом

WEB хостинг: терминальный доступ на сервер

Основы HTML

HTML (от англ. HyperText Markup Language — «язык гипертекстовой разметки») — стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц содержат описание разметки на языке HTML (или XHTML).

Язык HTML интерпретируется браузерами, полученный в результате интерпретации форматированный текст отображается на экране монитора компьютера или мобильного устройства.

Тег HTML - элемент языка разметки гипертекста. Текст, содержащийся между начальным и конечным тегом отображается и размещается в соответствии со свойствами, определенными для данного тега.

Структура HTML документа

Стилевые описания CSS

CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки.

CSS используется создателями веб-страниц для задания цветов, шрифтов, расположения отдельных блоков и др.

Формирование Веб-документа

HTML

CSS

JavaScript

Ин

тер

пр

етац

ия

веб

-б

рау

зер

а

Статистика использования браузеров 2015

• Данные с сайта http://www.w3counter.com

• Данные с сайта http://www.w3schools.com

Кроссбраузерность

Кроссбраузерность — свойство сайта отображаться и работать во всех популярных браузерах идентично. Под идентичностью понимается отсутствие развалов верстки и способность отображать материал с одинаковой степенью читабельности.

Базовые понятия: Программирование

Программирование— процесс записи алгоритма/программы.

Язык программирования – набор правил определяющих способ записи программы

Front-end разработка

Front-end разработка – это создание клиентской части веб приложения. В нее входят (в общем случае): • HTML верстка шаблонов страниц сайта/UI • Создание UI • Программирование UI

Front-end разработчик vs JS разработчик: • Часто это одно и тоже • Front-end шире, чем JS • Front-end не всегда JS

Некоторые варианты front-end для WEB: • HTML/JavaScript • Flash/Flex/ActionScript • ActiveX/C+ или C# • Applet/Java • HTML/VBScript (только Internet Explorer)

JavaScript

JavaScript - прототипно-ориентированный сценарный язык программирования. Наиболее широкое применение нашел в веббраузерах для создания интерактивных страниц.

Задачи, решаемые с помощью JS в браузере: • Управление UI • Динамическое формирование и

загрузка содержимого • Проверка данных форм • Управление структурой

документа • Создание визуальных эффектов • и др.

JavaScript

Код JavaSript: 1. Встраивается в страницу или подключается к ней 2. Интерпретируется браузером 3. Выполняется браузером при возникновении определенных событий 4. Может менять содержимое и структуру страницы Пример:

Базовые понятия: Фреймворки

Принцип действия: 1. Реализует типовое приложение 2. Позволяет расширять себя под

конкретную задачу 3. Используется для более быстрого

создания однотипных систем

Фрейворк - каркас программной системы с определенной структурой и поведением по умолчанию

Библиотеки и фреймворки JavaScript

Библиотека/фреймворк JavaScript – набор функций/прототипов написанных на JS и готовых для повторного использования. Библиотека/фреймворк JS: • Решает определенный круг типовых задач front-end разработки • Состоит из одного или нескольких файлов JS • Может быть подключена к одной/нескольким/всем страницам веб приложения Типовые задачи, решаемые JS фреймворками: • Упрощение манипулирования элементами документа DOM • Разделение данных, логики и отображения (шаблон MVC) • Уменьшение количества кода • Модульность

Библиотеки и фреймворки JavaScript

Библиотека/Фреймворк Назначение и особенности

jQuery 1. Взаимодействиe JavaScript и HTML. 2. Работа с AJAX Пример: $("div.test"). addClass("blue")

AngularJS 1. Разработка сложных клиентских одностраничных приложений. 2. Отделение логики от данных и отображения (MVC) 3. Приложения более компактные.

Backbone.js См. Angular JS

Ember.js

См. Angular JS

CoffeScript 1. Язык, расширяющий возможности JS. 2. Транслируется на сервере в JS 3. Код более компактный и читаемый

jQuery

Библиотека jQuery: • Помогает получать доступ к любому элементу DOM, • Помогает обращаться к атрибутам и содержимому элементов DOM, • Помогает манипулировать элементами DOM, • Предоставляет удобный API для работы с AJAX, • Предоставляет набор компонентов UI

Примеры: • Меняем содержимое кнопки $( "button.continue" ).html( "Next Step..." ) • Выводим контейнер при нажатии на любую кнопку button-container

var hiddenBox = $( "#banner-message" ); $( "#button-container button" ).on( "click", function( event ) { hiddenBox.show(); });

Angular.js

Приложение на Angular.js состоит из модулей. Основные элементы модуля: 1. Контроллеры (Controllers) 2. Представления (View) 3. Менеджеров контроллеров (Routes) 4. Директив (Directives)

Angular.js: простейший модуль

AJAX

AJAX, (Asynchronous Javascript and XML — «асинхронный JavaScript и XML») — подход к построению интерактивных пользовательских интерфейсов веб-приложений, заключающийся в «фоновом» обмене данными браузера с веб-сервером, когда при обновлении данных веб-страница не перезагружается полностью.

Веб серверы

Статистика использования Веб серверов май 2015 по данным http://w3techs.com/:

WEB сервисы

Примеры WEB сервисов: • Google Maps Api Web Services • Yandex Search API • Platron API

Веб-сервис — идентифицируемая веб-адресом (url) программная система со стандартизированными интерфейсами.

СУБД в WEB

СУБД – программное обеспечение для управления базой данных Язык запросов – один из важнейших элементов СУБД SQL – де-факто стандартный язык запросов к реляционным БД

MS SQL Server, Oracle DB, PostgreSQL, MySQL, SQLLite и др.

Команда Описание

CREATE TABLE Создает таблицу

DROP TABLE Физически удаляет таблицу из базы данных

SELECT Выполняет запрос на выборку данных из таблиц и представлений

DELETE Удаляет одну или более строк из таблицы базы данных

INSERT Вставляет одну или более строк в таблицу базы данных

Среды WEB разработки

IDE - система программных средств, используемая программистами для

разработки программного обеспечения (ПО). Некоторые IDE используемые в WEB разработке: • MS Visual Studio (MS Visual WEB Developer) • IntelliJ IDEA (RubyMine) • WebStorm • Notepad и др.

Серверные WEB технологии: PHP

PHP - скриптовый язык общего назначения, интенсивно применяемый для разработки веб-приложений, одним из лидеров среди языков, применяющихся для создания динамических веб-сайтов.

Популярные PHP фреймворки: • Zend Framework • Yii • Drupal

Обработка

Исходный файл PHP: Передается клиенту:

Серверные WEB технологии: ASP.NET

ASP.NET(Active Server Pages) — технология создания веб-приложений и веб-сервисов от компании Майкрософт, часть платформы Microsoft .NET

Серверные WEB технологии: ROR

ROR (Ruby on Rails) - фреймворк, написанный на Ruby. Ruby on Rails предоставляет архитектурный каркас MVC для веб-приложений, а также обеспечивает их интеграцию с веб-сервером и сервером базы данных.

Серверные WEB технологии: Python/ Django

Python — высокоуровневый язык программирования общего назначения, ориентированный на повышение производительности разработчика и читаемости кода.

Hello.py

Django — свободный фреймворк для веб-приложений на языке Python, использующий шаблон проектирования MVC

Серверные WEB технологии: Java

JSP(JavaServer Pages) – серверная технология WEB. Страница JSP включает и код и HTML разметку и компилируется в servlet.

Сервлет – класс Java, реализация которого расширяет функциональные возможности WEB сервера.

Серверные WEB технологии: Java

Пример сервлета:

Разработка WEB приложений

Подходы к разработке: 1. Разработка с «нуля»:

• Серверная: языки PHP, ASP, Java; • Клиентская: HTML, JS, CSS

2. Разработка с использование фреймворков: • Rails и язык Ruby • Django и язык Python • Zend Framework и язык PHP

3. Разработка с использованием CMS: 1С-Битрикс, UMI.CMS, Joomla, WordPress

Что нужно знать о проекте рекрутеру?

1. Архитектура проекта (уровневость) 2. Клиентские языки программирования проекта 3. Серверные языки программирования проекта 4. Используемые клиентские и серверные библиотеки 5. Используемые протоколы и API 6. Используемые фреймворки и(или) CMS 7. Используемые БД 8. Используемые IDE (среды разработки) 9. Какую часть проекта будет писать программист на

конкретной позиции

Ну и, конечно, какие задачи решает проект…

Спасибо за внимание!

• Сайт: http://www.it-dominanta.ru

• Телефон: +7 (812) 334-99-90

• E-mail: contact@it-dominanta.ru

• Адрес: 191186, Санкт-Петербург, Большая морская ул., д.3 (БЦ "Лидваль"), офис 314.

Контакты:

Лаабе Дмитрий Генеральный директор и основатель IT-Доминанта Технический директор портала IT-Событие email: Dmitry@it-dominanta.ru