SixWeeksApp: этап 2 — делаем сайт с помощью Bootstrap/Angular

А и Б сидели на трубе

Итак, на этой неделе мы приступаем ко второму этапу или “неделе” реализации нашего приложения, которое мы должны написать за 6 недель. На втором этапе у нас уже должен быть готов внешний вид сайта, со всеми его страницами, но без бэкенда.

Предварительный план выглядит так:

Day 1: HTML layout + automation environment
Day 2: SASS Styles and Desktop Version
Day 3: Angular Router and Decomposition + Angular App Architecture
Day 4: Mockup DB and REST API on Front
Day 5: Bringing It All Together: Controller, Services and Views

День первый: настройка окружения разработчика и верстка страниц

Чтобы мы могли работать эффективно, для начала надо настроить окружение. Что это значит? Раньше, когда HTML-верстка не была такой сложной, можно было просто открыть HTML страницу в своем любимом редакторе, добавлять туда стили, картинки и ссылки, и всё замечательно работало.

Потом сайты стали “динамичными” и, в основном, использовали PHP. Никакой автоматизации тогда тоже не было (за исключением некоторых платных IDE), поэтому разработчик поднимал у себя на десктопе LAMP (Linux/Apache/MySQL/PHP) или WAMP (то же, но с Windows) сервер, правил файлы и обновлял страницу.

Мы разрабатываем сайт на другом стэке технологий, в основе которого лежит JavaScript. Он используется и для фронтэнда, и для бэкенда и даже мой редактор кода (Brackets) написан на JavaScript! Ну, раз оказалось, что все можно написать на JavaScript, это и было сделано.

Появились специальные утилиты, которые облегчают быт веб-разработчика: запускают веб-сервер, чтобы не возникала ошибка CORS, сами обновляют страницу в браузере, сами готовят проект к публикации, минимизируя размер и количество файлов и многое другое.

Всё это стало возможно благодаря Node.jsреализации JavaScript для работы вне браузера. Мы, конечно, же будем использовать Node.js (вместе с СУБД MongoDB) для реализации бэкенда, а во фронтэнде будем использовать некоторые утилиты, которые облегчают разработку приложения.

В первую очередь это Gulp и его многочисленные плагины, которые будут компилировать наш SCSS код в обычные таблицы стилей, автоматически обновлять страницу в браузере при сохранении изменений (это удобно, когда есть два монитора), а также впоследствии подготовить проект к публикации на сервере.

Теперь непосредственно о самой верстке. Здесь мы максимально попробуем ускорить разработку используя не только фреймворк Bootstrap, но и фреймфорк-надстройку Material for Bootstrap, чтобы не потратить кучу времени на реализацию Material-дизайна, который мы выбрали основным языком интерфейса.

День второй: SASS и десктоп-версия

На самом деле, разделение на дни тут условное. Мы все равно будем делать верстку с использованием стилей, но тонкую настройку с помощью препроцессора SASS и верстку для больших экранов будем делать уже после реализации нашего подхода mobile first.

День третий: AngularJS

Фреймворк AngularJS появился в далеком 2009-м году. Он был первопроходцем среди JS-фреймворков и совершил множество архитектурных ошибок (например, невозможность нормального роутинга для поисковых спайдеров без танцев с бубном и конфигурации серверного ПО). А также привлек огромное количество… эээ…. кодеров, которые до этого делали сайты на пэхапэ и джэквери. Они принесли свои привычки и навыки написания спагетти кода, в результате чего Angular стал предметом насмешек и высокомерного отношения среди веб-программистов.

На днях Google (разработчик Angular) выкатит вторую версию, которая радикально несовместима с Angular 1, что добавляет еще больше печали. Современные фреймворки обладают более стройными архитектурными решениями, но самое главное отличие в подходе: все они используют подход write HTML in JS, в то время как Angular наоборот — write JS in HTML.

Вы спросите, почему же я пишу сайт на таком, эээ… сомнительном инструментарии? Ответ простой — потому что. Потому что это — требование специализации, где я буду защищать дипломный проект. К тому же наш наставник — индус, что многое объясняет.

У Angular есть и хорошие стороны: простота верстки шаблонов (даже дизайнеры без знания JS могут их править!), большое количество учебной и практической информации в интернетах, ну и поддержка enterprise, что как бы открывает определенные перспективы.

Чтобы наш код был читаемым и не стал походить на кастрюлю макарон, мы будем придерживаться определенного стиля написания и архитектуры. Эти стили определены в так называемом style guide. В случае Angular они написаны известным евангелистом John Papa. Есть и другие стили, но мы постараемся следовать именно этому.

День четвертый: REST API

Конечно, возможно написание сайта и даже веб-приложения без написания бэкенда, с помощью BaaS (например, тот же Firebase от Google или Loopback от IBM), но мы выберем “трудный” путь — напишем серверную часть приложения сами. Но потом… А фронтэнд должен быть готов уже сейчас. Как же быть?

Использовать сервер-заглушку, который реализует REST API (протокол обмена информацией с сервером). Поскольку общение с сервером происходит в формате JSON, то сервер-заглушка может для тестов использовать статичный JSON-файл и отдавать на различные запросы веб-приложения.

Впоследствии, мы заменим сервер-заглушку на настоящую реализацию с реальной базой данных и, в идеале, всё продолжит работать как надо.

День пятый: собираем все вместе

Здесь задача “проста” — собрать всё воедино: верстку, REST и логику приложения в один большой комок макарон проект.

#SixWeeksApp

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *