Содержание 1
Введение 2
Глава 1. Постановка задачи 5
Глава 2. Актуальность 6
Глава 3. История развития фронтенд разработки 8
Глава 4. Основные понятия 10
Глава 5. Этапы создания 11
Глава 7. Разработка прототипа 12
Глава 8. Разработка дизайн системы 19
Глава 9. Разработка кодовой базы 27
Заключение 38
Литература 39
Листинг
На сегодняшний день веб-приложение является наиболее популярным программным продуктом на рынке информационных технологий. Веб-приложение представляет собой программное обеспечение, построенное по принципам трехзвенной клиент-серверной архитектуры. Такая архитектура подразумевает клиент-серверное взаимодействие, в котором клиентом выступает веб-браузер, а сервером — веб-сервер. Таким образом, веб-приложение состоит из серверной и клиентской части. Логика веб-приложения может быть распределена между клиентом и сервером. Клиентская часть отвечает преимущественно за отображение данных и пользовательский интерфейс, а также, возможно, за реализацию части бизнес логики. Клиентская часть получает данные от веб-сервера, формируя к нему запросы и обрабатывая ответы. Серверная часть реализует основу бизнес логики, сетевой программный интерфейс приложения, а также осуществляет контроль и работу базы данных, в которой может храниться необходимая для приложения информация. Соответственно разработка веб-приложения - это комплекс мер и действий по созданию и обеспечению работоспособности веб-приложения.
Популярность веб-приложений обусловлена множеством преимуществ, главным из которых является кроссплатформенность. Веб-приложение не зависит от конкретной операционной системы пользователя, следовательно, может работать на любой платформе. Пользователю для работы с веб-приложением нужен только веб-браузер и наличие активного интернет соединения.
Отрасль, занимающаяся разработкой веб-приложений, называется веб-разработкой. Это динамически развивающаяся отрасль разработки со своими особенности. Веб разработку можно разделить на две составляющие: разработка серверной части - бэкенд (от англ. back end) разработка и разработка клиентской части - фронтенд (от англ. front end) разработка.
Каждый язык программирования для бэкенд разработки имеет специфичные фреймворки, разнообразие которых может поначалу сбить с толку. Но сообщество разработчиков выделяет наиболее практически применимые из них, упрощая процесс поиска эффективных инструментов.
Клиентская часть или фронтенд определяет внешний вид веб-приложения. Поэтому смежной для фронтенда является отрасль веб-дизайна. Непосредственно перед разработкой клиентской части создаётся прототип, а затем и дизайн веб-приложения. Очень часто фронтенд разработчик в том числе и дизайнер. Хорошо спроектированный дизайн не менее важен, чем качественно разработанный фронтенд и бэкенд, потому что пользователь прежде всего видит продукт и его первый опыт связан с внешним видом и удобством пользования. Поэтому для дизайна в том числе создаётся множество методологий, практик и инструментов.
В общем случае, фронтенд разработкой можно заниматься с менее насыщенным набором технологий чем бэкенд разработкой, потому что все технологии фронтенда - это то, что понимает веб-браузер, то есть HTML, CSS, JavaScript. Но отличительной особенностью фронтенд разработки является огромное количество вспомогательных инструментов. Если в бэкенд разработке достаточно выбрать только язык программирования, а все сопутствующие инструменты уже как правило предопределены, то во фронтенд разработке нужно определиться с целым стеком технологий. Современные разработчики сумели обойти ограничение веб-браузера в поддержке только трёх технологий путем создания абстракций над всеми тремя. Для решения определённых проблем создаются целые языки программирования, такие как TypeScript, CoffeeScript. Эти языки используются непосредственно в процессе разработки веб-приложений, но веб-браузер понимает только JavaScript, поэтому для запуска и тестирования веб-приложений, написанных на одном из языков-абстракций, необходимо скомпилировать кодовую базу в JavaScript. Таким образом, разработчики могут использовать отсутствующие в JavaScript технологии для разработки фронтенда веб-приложений и не ощущают на себе браузерных ограничений. Существует также языки, позволяющие писать и фронтенд, и бэкенд одновременно, например, Kotlin. Также стоит упомянуть программную платформу Node.js, позволяющую писать серверную часть на JavaScript. При использовании Node.js становится возможным писать общую для фронтенда и бэкенда часть кода.
Для абстракций над HTML и CSS существуют другие инструменты - это шаблонизаторы и препроцессоры соответственно. Например, существуют шаблонизаторы HTML - Jade и Haml, которые позволяют писать Ruby- подобный код. HTML шаблонизаторы есть почти в любом бэкенд фреймворке. Из CSS препроцессоров самыми популярными являются Sass и Less. Каждый из них добавляет особый функционал, например, переменные, миксины и многое другое.
Отрасль фронтенд разработки динамично развивается, предлагая всё большее количество решений. За последние годы в отрасли фронтенд разработки появилось больше инструментов, чем в других областях за несколько десятков лет. За один год в спецификацию ECMAScript могут внедрить особенность, которая позволяет использовать совершенно новые возможности JavaScript. Но несмотря на высокий порог вхождения, частые изменения фронтенд разработки, эта отрасль предоставляет обилие вариантов решения одной и той же задачи.
Разработка клиентской части веб-приложения включает в себя очень разнообразные вещи. Здесь могут сосуществовать процессы из разных отраслей. Прототипирование, дизайн, программирование. Все они очень тесно связаны и очень зависят друг от друга. Поэтому нельзя освоить только одну из этих направлений чтобы стать хорошим разработчиком интерфейсов. Нужно прекрасно понимать зачем делаются те или иные вещи во всех трёх направлениях.
Открытием для разработки интерфейсов на сегодняшний день является функциональное и реактивное программирование, которое так тесно вошло в жизнь фронтенд разработчика и каждый день упрощает её, делая отладку и поддержку кода легче. Все лучше концепции современной фронтенд разработки также очень успешно вобрал в себя React, собрав вокруг себя сообщество разработчиков, которые каждый день создают полезные инструменты.
Суммируя, можно сказать, что все вышеперечисленные лучшие практики, а также их воплощения в виде React и помогающих ему инструментов очень упростили разработку клиентской части модуля тестирования StudyKit, сделав её очень приятной и удобной. В будущем, поддержка этого проекта будет осуществляться только с удовольствием, благодаря изученным инструментам.
1. Т.З. Варфел - Прототипирование. Практическое руководство //Москва - 2013.
2. Б. Гейтс - Бизнес со скоростью мысли //Москва - 2000.
3. К. Джереми - HTML5 для веб-дизайнеров //Манн, Иванов и Фербер - 2012.
4. Д. Сидерхолм - CSS3 для веб-дизайнеров //Манн, Иванов и Фербер - 2012.
5. А. Уолтер - Эмоциональный веб-дизайн //Манн, Иванов и Фербер - 2012.
6. Архитектура дизайн-систем
https: //www. youtube. com/watch?v=j 6v-B45fsDI
7. Подборка JavaScript-фреймворковhttps: //tpro ger.ru/digest/top-javascript-frontend-frameworks/
8. Введение в Reacthttp: //j sraccoon. ru/react-intro
9. О Reacthttp://www.mateoclarke.com/blog/2015/08/26/what-i-learned-react/