Кто такой фронтенд-разработчик и как им стать, если нет образования

Содержание:

Интерактивность

Одна из областей применения JavaScript — добавление интерактивности вашей странице

Теперь, когда у вас есть представление о JavaScript как о языке, можно перейти к его применению в вебе. Для понимания того, как JavaScript взаимодействует с сайтами, вы должны сначала узнать об объектной модели документа (DOM).

DOM является отражением структуры HTML-документа. Это древовидная структура, состоящая из объектов JavaScript, которые соответствуют узлам HTML. Для дальнейшего изучения DOM, прочитайте Что такое DOM? в переводе Frontender Magazine. Статья даст вам простое и понятное объяснение понятия DOM.

Инспектируем DOM

JavaScript взаимодействует с DOM и изменяет или обновляет его. Вот пример, в котором мы выбираем HTML элемент и изменяем его содержимое:

var container = document.getElementById(“container”);container.innerHTML = 'New Content!';

Не волнуйтесь, что это какой-то очень элементарный пример. Вы можете сделать гораздо больше этого при помощи манипуляций с DOM. Чтобы узнать больше о использовании JavaScript для взаимодействий с DOM, пройдите в раздел Руководство по DOM в документации MDN.

  • Введение в DOM
  • Events
  • Examples of web and XML development using the DOM
  • How to create a DOM tree
  • Locating DOM elements using selectors

Опять же, сосредоточьтесь на понимании концепции, минуя синтаксис. У вас должны быть ответы на следующие вопросы:

  • Что такое DOM?
  • Как обратится к элементам?
  • Как добавить обработчик событий?
  • Как изменить свойства узла DOM?

Для получения полного списка доступных манипуляций с DOM при помощи JavaScript, обратитесь к JavaScript Functions and Helpers от PlainJS. Этот сайт содержит объяснения того, как, например, менять свойства стилей HTML-элементов или обрабатывать события клавиатуры. Если вы хотите копнуть глубже, то вы всегда можете прочитать раздел о DOM в книге Выразительный JavaScript.

Soft Skills и Hard Skills фронтендера

Условно знания можно разделить на Soft Skills и Hard Skills. Они могут отличаться не только по навыкам, но и итоговой зарплате. Программист фронтенд должен понимать различия:

Soft Skills. Личностные качества, необходимые для карьерного роста. Сюда условно относят:

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

Hard Skills. Базовые навыки, которые прописываются в должностных инструкциях. Начальные и основные профессиональные умения. Ими обязан обладать даже junior frontend разработчик.

Основное программное обеспечение или что должен знать frontend и использовать в работе:

  • HTML;
  • CSS;
  • JavaScript;
  • jQuery;
  • Photoshop;
  • Шаблонизаторы.

Профессия доступна даже новичкам в программировании. Но не стоит ждать высокой оплаты труда при минимально развитых навыках. К преимуществам профессии относят востребованность должности, перспективы карьерного роста, возможность работать с зарубежными компаниями при условии знания языка.

Но есть и минусы, ведь даже зная кто такой фронтенд разработчик, компании нередко не могут сами назначить четкие границы его обязанностей. Помимо стандартных нередко включают инжиниринг, developing и др.

Поэтому полезно сначала пройти стажировку, чтобы знать с чем придется работать потом. Различия в требованиях компаний могут быть колоссальными.

Предыстория

BILLmanager появился как раз в те времена, когда не было жёсткого разделения по направлениям. Он имел согласованную архитектуру, умел управлять поведением пользователя и его даже можно было расширять плагинами. Шло время, команда развивала продукт, и вроде всё было хорошо, но стали наблюдаться странные явления. К примеру, когда программист занимался бизнес-логикой, он начинал плохо верстать формы, делал их неудобными и сложными для восприятия. Или добавление, казалось бы, простой функциональности отнимало несколько недель: архитектурно модули были жёстко связаны, поэтому при изменении одного приходилось корректировать другой.

Про удобство, эргономику и глобальное развитие продукта вообще можно было забыть, когда приложение падало с неизвестной ошибкой. Если раньше программист успевал делать работу в разных направлениях, то с ростом продукта и требований к нему это стало невозможно. Разработчик видел картину в целом и понимал, что если функция не будет правильно и стабильно работать, то формочки, кнопочки, тесты и продвижение не помогут. Поэтому откладывал всё и садился за исправление злосчастной ошибки. Совершал свой маленький подвиг, который оставался никем не оценённым (сил на правильную подачу клиенту уже просто не было), но функция начинала работать. Собственно, чтобы эти маленькие подвиги доходили до клиентов, в команде и появились люди, ответственные за разные направления: фронтенд и бэкенд, тестирование, дизайн, поддержку, продвижение.

Но это было только первым шагом. Команда изменилась, а архитектура продукта осталась технически сильно связанной. Из-за этого не получалось развивать приложение требуемыми темпами, при изменении интерфейса приходилось менять логику бэкенда, хотя структура самих данных часто оставалась неизменной. Со всем этим надо было что-то делать.

jQuery

До сего момента вы производили манипуляции с DOM только при помощи JavaScript. Правда в том, что существует множество библиотек для манипуляций с DOM, которые предоставляют API-интерфейсы, облегчающие написание вашего кода.

Одна из самых популярных таких библиотек — jQuery. Запомните, что jQuery является императивной библиотекой. Она была написана еще до того, как фронтенд системы стали такими сложными как сегодня. Теперь для управления сложными интерфейсами чаще используют декларативные фреймворки и библиотеки наподобие Angular и React. Тем не менее я по-прежнему рекомендую вам изучить jQuery, поскольку вполне вероятно, что вы столкнетесь с ним в своей работе.

Абстрактно говоря, jQuery находится на вершине простых DOM манипуляций

Для изучения основ jQuery, ознакомьтесь с материалами в Учебном центре. Они шаг за шагом проведут вас по таким важным понятиям, как, например, анимация или обработка событий. Если вы хотите больше обучающих материалов на эту тему, то я даю вам ссылки на курс от Codecademy по jQuery.

Имейте в виду, jQuery не всегда подходит для императивного манипулирования DOM. PlainJS и You Might Not Need jQuery — два хороших ресурса, которые покажут вам эквиваленты функций jQuery на чистом JavaScript.

MVC предков — Первоисточник

Отделение данных от представления является основной темой графических пользовательских интерфейсов (как веб-ориентированных, так и настольных). С MVC — Model View Controller, отделение представления (View) от доменной области (Model) было основной мотивацией проектирования. И, без сомнения, MVC была плодотворной работой, которая повлияла на будущие поколения.

MVC был представлен для Smalltalk-80. В MVC объект View отображает данные, хранящиеся в объекте Model. Прежде чем мы сможем полностью изучить потоки данных в MVC, мы должны понять среды прикладных программ того времени (около 1970-х годов):

  • Этот MVC был предназначен только для настольных приложений. Веб еще не родился. Мы говорим о десятилетии до этого.
  • Забудьте о Web. Сложных операционных систем с графическим интерфейсом не существует.
  • Это означает, что прикладное программное обеспечение было очень близко «железу» систем.

Эти ограничения имели важные последствия для MVC. Обязанностью объекта Controller стало реагирование на пользовательские вводы, такие как клавиатура или мышь, и их преобразование в действия над моделью. Кроме того, отсутствие графических элементов в операционных системах означает, что Представление (View) не соответствует тому, что на экране.

Скорее, Представление и Контроллер существовали как пара. Представление показывало пользовательский вывод, а Контроллер получал входные данные от пользователя. Следует отметить, что пара Представление-Контроллер существовала для каждого элемента управления на экране, что дает нам раннюю концепцию виджета.

После всего сказанного о MVC, следующее изображение должно иллюстрировать потоки данных в MVC. В этом примере у нас есть простой счетчик с кнопкой увеличения и уменьшения. Состояние счетчика поддерживается Моделью. Также мы заменили две кнопки на одну, чтобы было проще.

С точки зрения связей:

  1. View и Controller содержат прямую ссылку на Model, но не наоборот. Это означает, что Model не зависит от пользовательского интерфейса и может меняться, не беспокоясь о проблемах пользовательского интерфейса.

  2. Модель реализует шаблон Observer, и на него подписывается один или несколько объектов View. Когда Model изменяется, она вызывает событие, и View обновляется после реакции на событие.

В MVC есть два разных потока данных. Во View-потоке Model не участвует. Это только изменение пользовательского интерфейса. Показ эффекта нажатия кнопки или реакция на событие прокрутки мыши — пример View-потока.

Сегодня мы больше не используем этот MVC и поэтому иногда его называют классическим MVC или MVC предков (father’s MVC).

Как стать фронтенд-разработчиком

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

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

Онлайн-курс от Skillbox даст основы HTML, CSS и JavaScript, научит создавать сайты и оптимизировать их под различные устройства. Дают навыки работы с анимацией оптимизации кода.

Преподаватели Skillfactory предлагают получить востребованную профессию. Старт в создании адаптивных веб-сайтов, разработке интерактивных приложений и страниц, написание сложных компонентов и интерфейсов.

Ускоренный курс от Гикбрейнс. За 5 месяцев научат создавать крутые сайты. Живое общение в экспертами-практиками, большое количество практики, работа с наставником, удобное разбиение материала по блокам.

Полноценный курс от Нетологии. Изучение 10 технологий, работа с реальными проектами, диплом, карьерный рост. Обучение верстке, решению задач с Яваскрипт. В программу входит даже английский язык для начинающих разработчиков.

Онлайн-курс от Skillbox, рассчитанный на год обучения. Работа с фреймворками, создание веб-приложений, закрепление навыков, пополнение портфолио, работа с системами контроля и продвинутыми макетами.

Обучение от Нетологии. Позволит добавить библиотеку в резюме, научит создавать более 20 вариантов интерактивных интерфейсов в период обучения.

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

И не забывайте развлекаться

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

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

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

P.S. от переводчика:

Где учиться

Выучиться на фронтенд-разработчика раз и навсегда не получится. Эта сфера быстро развивается, новые фреймворки появляются каждый месяц. Так что самообразование должно стать частью работы.

Получить актуальные базовые знания можно на онлайн- или офлайн-курсах. Например, мы в «Бруноям» создали программу Веб-разработчик с нуля в очном и в онлайн формате. В курсе представлена теория, личный опыт преподавателя — практикующего специалиста, а также задания, которые развивают необходимые фронтендеру навыки. Помимо этого мы рассказываем про бэкенд и фулстэк. Полученные знания и умения позволят претендовать на должность джуниор-фронтендера.

Онлайн-курс Веб-разработчик с нуля

Практический курс по веб-разработке: от HTML и CSS до практики по Javascript и PHP. Обучение включает создание портфолио, подготовку к собеседованиям и помощь наставника в вашем проекте. Последнее обновление курса — Август 2021
Узнать больше →

А что дальше?

Inner source. Assess

Если вы нацелены на ускорение поставки, распространение владения кодовой базы и межкомандное сотрудничество, то подход Inner Source может быть вам интересен.

Inner Source — это как Open Source, только внутри компании, который позволяет уменьшить зависимость от смежных команд разработки, что должно привести к ускорению выполнения задач.

Разберем на примере. Допустим, у вас есть две команды и первая команда хочет доработку от второй. Команда 1 приходит к команде 2, добавляет свою задачу в очередь бэклога и получает блокирующую зависимость в исполнении своего проекта. В случае с Inner Source все репозитории открыты внутрь компании. В таком подходе команда 1 может сделать pull request в целевую систему, а владелец системы — команда 2 — эти изменения проверит и вольет в основную ветку. Выходит, что первая команда получит свою доработку быстрее за счет использования собственного ресурса, чем если бы ждала, своей очереди в бэклоге другой команды.

Чтобы Inner Source работал, недостаточно просто открыть все репозитории — важно применять общие стандарты, такие как хорошая документация, понятный и прозрачный процесс контрибьютинга, качественная инфраструктура для развертывания изменений. Эта практика может положительно повлиять на мотивацию вашей команды, благодаря возможности влиять на любую систему компании, а также улучшить горизонтальные связи — допустим, между всеми фронтенд-разработчиками компании

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

Подробней ознакомиться с Inner Source можно на сайте комьюнити Inner Source.

Как взаимодействуют frontend и backend?

Взаимодействие frontend и backend происходит по кругу:

  • frontend отправляет пользовательскую информацию в backend;
  • информация обрабатывается;
  • и возвращается обратно, приняв понятную форму.

Этими работами занимаются разные специалисты, но каждому из них желательно понимать принципы, по которым работают коллеги

Даже дизайнеру интерфейсов важно хотя бы в общих чертах знать, что представляет собой backend проекта, которым он занимается. Это поможет адекватно оценить, какие технические возможности есть у сайта или приложения

Существует несколько вариантов взаимодействия frontend и backend:

  • HTTP-запрос напрямую отправляется на сервер, сервер ищет информацию, встраивает ее в шаблон и возвращает в виде HTML-страницы.
  • Вариант с использованием инструментария AJAX (Asynchronous JavaScript and XML). В этом случае запрос отправляет JavaScript, загруженный в браузер, а ответ приходит в формате XML или JSON.
  • Одностраничные приложения, которые загружают данные без обновления страницы. Это делается также при помощи AJAX или фреймворков Angular и Ember.
  • Ember или библиотека React помогают использовать приложение и на сервере, и в клиенте. Frontend и backend взаимодействуют через AJAX и HTML-код, который обрабатывается на сервере.

Как стать frontend-разработчиком? Что нужно знать и уметь?

Ниже находится пошаговая инструкция, как стать frontend-программистом с нуля и что нужно знать для работы в этой сфере:

  1. Освоить HTML и CSS. HTML – это язык разметки веб-документов. CSS – каскадные таблицы стилей. Они управляют оформлением различных элементов на страницах (например, размером шрифтов).
  2. Изучить JavaScript – основной язык, который нужно знать frontend-программисту. Существуют различные библиотеки готовых скриптов, написанных на JavaScript. Их тоже лучше изучить, чтобы пользоваться ими и ускорять свою работу. Пример такой библиотеки – jQuery.
  3. Изучить методологию верстки, например, БЭМ от Яндекса. Методология помогает создавать веб-приложения по определенным принципам, которые помогают разбираться в чужом коде и в своем тоже по прошествии какого-то времени.
  4. Изучить фреймворки, в частности, Bootstrap. Фреймворк – это набор неких готовых решений, на базе которых можно создавать веб-сайты быстрее, чем при написании кода с нуля.
  5. Освоить кроссбраузерную верстку и научиться создавать страницы, которые одинаково выглядят в разных браузерах.
  6. Изучить адаптивный дизайн, т.е. дизайн, который подстраивается под размеры экрана пользователя. Таким образом сайт приемлемо выглядит на разных устройствах (компьютер, планшет, смартфон).
  7. Не лишним будет освоить языки серверного программирования на базовом уровне. Например, язык PHP – один из самых популярных в среде веб.
  8. Изучить Git и научиться работать с системами контроля версий.

Как видим, программа обучения frontend-программиста весьма обширна и включает множество навыков и умений.

Путь обучения

Время изучения: 1–2 часа

Необходимые условия

Ничего, кроме базовой компьютерной грамотности.

Как понять, что я могу двигаться дальше?

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

Основные руководства

  • Установка базового программного обеспечения— базовая настройка инструмента (15 минут чтения)
  • История всемирной сети и веб-стандартов (45 минут чтения)
  • Обучение и получение помощи (45 минут чтения)

Время завершения: 35–50 часов

Необходимые условия

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

Как понять, что я могу двигаться дальше?

Оценки в каждом модуле предназначены для проверки ваших знаний по предмету — завершение каждого из них докажет, что вы можете перейти к следующему модулю.

Основные модули

  • Введение в HTML (15–20 часов чтения/упражнений)
  • Мультимедиа и встраивание (15–20 часов чтения/упражнений)
  • HTML таблицы (5–10 часов чтения/упражнений)

Время завершения: 90–120 часов

Необходимые условия

Рекомендуется иметь базовые знания HTML перед началом изучения CSS. Сначала вы должны изучить Введение в HTML.

Как понять, что я могу двигаться дальше?

Оценки в каждом модуле предназначены для проверки ваших знаний по предмету — завершение каждого из них докажет, что вы можете перейти к следующему модулю.

Основные модули

  • Первые шаги в CSS (10–15 часов чтения/упражнений)
  • Структурные элементы CSS (35–45 часов чтения/упражнений)
  • Стилизирование текста (15–20 часов чтения/упражнений)
  • CSS разметка (30–40 часов чтения/упражнений)

Книга рецептов CSS

Время завершения: 135–185 часов

Необходимые условия

Рекомендуется иметь базовые знания HTML перед началом изучения JavaScript. Сначала вы должны изучить Введение в HTML.

Как понять, что я могу двигаться дальше?

Оценки в каждом модуле предназначены для проверки ваших знаний по предмету — завершение каждого из них докажет, что вы можете перейти к следующему модулю.

Основные модули

  • Первые шаги в JavaScript (30–40 часов чтения/упражнений)
  • Структурные элементы Javascript (25–35 часов чтения/упражнений)
  • Клиентский веб API (30–40 часов чтения/упражнений)
  • Введение в объекты Javascript (25–35 часов чтения/упражнений)
  • Асинхронный Javascript (25–35 часов чтения/упражнений)

Время завершения: 40–50 часов

Необходимые условия

Для эффективного использования форм требуется знание HTML, CSS и JavaScript. Они сложны и поэтому рассматриваются отдельно.

Как понять, что я могу двигаться дальше?

Упражнения и оценки в каждом модуле предназначены для проверки ваших знаний по предмету — завершение каждого из них докажет, что вы можете перейти к следующему модулю.

Основные модули

Веб формы (40–50 часов)

Время завершения: 60–75 часов

Необходимые условия

Рекомендуется ознакомиться с HTML, CSS и JavaScript перед началом работы с этим разделом — многие из техник и лучших практик используются в нескольких технологиях.

Как понять, что я могу двигаться дальше?

Упражнения и оценки в каждом модуле предназначены для проверки ваших знаний по предмету — завершение каждого из них докажет, что вы можете перейти к следующему модулю.

Основные модули

  • Кросс-браузерное тестирование (25–30 часов чтения/упражнений)
  • Доступность (20–25 часов чтения/упражнений)

Время завершения: 55–90 часов

Необходимые условия

Рекомендуется ознакомиться с HTML, CSS и JavaScript перед началом работы с этим разделом, так как обсуждаемые инструменты работают со многими из этих технологий.

Как понять, что я могу двигаться дальше?

В этом наборе модулей нет специальных статей для оценки, но учебные примеры в конце 2-го и 3-го модулей хорошо подготовят вас к пониманию основ современного инструментария.

Основные модули

  • Git и Github (5 часов чтения)
  • Понимание инструментов на стороне клиента (20–25 часов чтения/упражнений)
  • Понимание JavaScript-фреймворков для фронтенда (30-60 часов чтения/упражнений)

Инструменты

Для того, чтобы войти в профессию, необходимо освоить три инструмента:

  1. HTML — язык разметки документов. С его помощью создается структура страницы: заголовки, подзаголовки, абзацы, списки и т.д.
  2. CSS — язык описания внешнего вида страницы. Благодаря ему структура обретает конкретный дизайн: цвета, шрифты, расположение элементов.
  3. JavaScript — самый популярный язык программирования (по данным Stack Overflow). Позволяет реагировать на действия пользователей, то есть делает страницы интерактивными. Например, если вы навели курсор на иконку, и она подсветилась, это произошло благодаря JavaScript. Также способствует отправке данных на сервер (например, когда вы ввели логин и пароль, чтобы авторизоваться на сайте).

Знание трех языков станет базой для будущего фронтендера. Но это, конечно, еще не все. Понадобится освоить другие инструменты. Какие именно, будет зависеть от проекта.

Например, метаязыки SASS и LESS ускоряют процесс создания CSS-кода, он получается быстрым, валидным. PUG делает то же самое для HTML-кода.

Flexbox (один из модулей CSS) позволяет управлять размером, расположением элементов, выравнивать их по нескольким осям, распределять свободное место между элементами и т.д.

JavaScript-библиотеки, например JQuery, сокращают коды, могут сделать из длинного однострочный. На JQuery разработано множество популярных динамических эффектов, которые удобно подключать к проекту. Также популярна библиотека Redux.

Могут пригодиться фреймворки — наборы из нескольких библиотек, также призванные ускорять разработку сайтов. Angular и Vue.js — JavaScript-фреймворки, которые применяют чаще других.

Владение системой контроля версий Git дает возможность отслеживать изменения в файлах и вести один проект совместно с коллегами.

Node.js — программная платформа, которая позволяет работать с JavaScript вне браузера. Владение Node.js приближает фронтендера к бэкенд-разработчикам. А знакомство с языками PHP и Python не только облегчит работу в команде, но и поспособствует становлению фулстэком.

Какие еще скилы помогут погрузиться в профессию и чувствовать себя в ней комфортно?

  • Математические знания: структуры данных, алгоритмы, переменные и функции + развитое абстрактное мышление.

  • Английский язык, чтобы не переводить спецификацию в Google Translate, общаться с коллегами и заказчиками (если попадете в иностранную компанию), заниматься самообразованием.

  • Коммуникабельность и умение работать в команде. Фронтенд-разработчик — это не соло-специальность, ему необходимо регулярно контактировать с бэкендерами, дизайнерами, тестировщиками. Желательно, чтобы общение было конструктивным и приятным. 🙂

В целом фронтендер — конечно, технарь, но не без тяги к прекрасному, ведь его работа не только про функциональность, но и про дизайн.

Что нужно знать и уметь

Фронтенд-специалист – это человек, который знает основы работы по нескольким направлениям. Например, знает как минимум на начальном уровне веб-дизайн и обязанности верстальщика.

Ему нужно всегда прокачивать свои навыки и следить за изменениями в требованиях к клиентской части сайтов, интерфейсу гаджетов, быть осведомленным по части актуальных новостей.

Профессиональные навыки frontend-разработчика:

  • знать и понимать основы верстки и ее методологий;
  • создавать одинаковые страницы во всех браузерах и в разных устройствах;
  • должен уметь работать с HTML и CSS;
  • разбираться во фреймворках – наборе готовых решений, которые помогают создавать интернет-сервисы быстрее;
  • иметь знания и навыки работы в JavaScript;
  • знать английский язык на уровне Intermediate и выше;
  • иметь представление о начальных этапах работы с адаптивным дизайном;
  • знать, что такое язык серверного программирования, и уметь с ним работать;
  • изучить Git – систему для отслеживания и контроля изменений в версиях файлов.

Личностные характеристики:

  • аналитическое мышление;
  • ответственность;
  • коммуникабельность и умение общаться с разноплановыми специалистами;
  • креативный подход к работе;
  • аккуратность;
  • трудолюбие;
  • способность доносить свои идеи и мысли в устной и письменной формах;
  • умение находить решения проблем;
  • внимательность;
  • соблюдение сроков работы;
  • объективная оценка своих возможностей;
  • целеустремленность;
  • постоянное развитие в сфере IT-технологий, быстрое освоение новых инструментов и сервисов.

Основные инструменты для работы

Frontend-разработчик – это не самая легкая должность. И универсальные инструменты будут упрощать работу специалиста и станут для него незаменимым помощником.

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

  1. HTML мы уже затрагивали. Простыми словами это машинный язык для общения с поисковыми системами.
  2. CSS – это язык, на котором описывается внешний вид элементов на веб-страницах.
  3. JavaScript – язык программирования, на котором написаны библиотеки готовых приложений (скриптов). Он является самым важным для frontend-разработчиков.
  4. jQuery – библиотека, которая нужна для создания анимационных деталей и форм онлайн-заявок.
  5. Photoshop – используется для разделения макетов, присланных веб-дизайнером, на составные части.
  6. Шаблонизаторы – позволяют использовать данные для создания конечных html-страниц в динамическом режиме.

Эксперимент 2

Надеюсь, первый эксперимент дал вам определенную уверенность в написании HTML и CSS. Для эксперимента 2 мы заглянем на ряд сайтов, затем напишем код нескольких компонентов.

Некоторые веб-сайты используют CSS фреймворки или обфускацию кода (рус.), затрудняя чтение. Поэтому я подобрал сайты с хорошим дизайном и легким для чтения кодом.

  • Dropbox for Business: Попробуйте повторить их секцию с баннерами (так называемые hero image (англ.))
  • AirBnB: Попробуйте повторить их футер
  • PayPal: Попробуйте повторить их навигацию
  • Invision: Попробуйте повторить секцию регистрации (signup) в нижней части страницы
  • Stripe: Попробуйте повторить секцию оплаты

Еще раз повторю, что целью второго эксперимента является не воссоздание главной страницы. Даже не смотря на то, что это бы точно не помешало! Выберите пару ключевых компонентов, например навигационную панель или секцию с баннерами и сверстайте их. Я написал свои предложения рядом со ссылками на сайты, но вы можете выбрать другие части на свое усмотрение.

Вы можете использовать CodePen для своих экспериментов или выполните их на своем компьютере. Если вы планируете работать локально, то так же можете скачать этот пример проекта в качестве шаблона или создать файлы с нуля. Я советую вам использовать редакторы Atom или Sublime.

В царство веб-приложений

По аналогии с оригинальный MVC, появился шаблон для использования с веб-приложениями. Он известен как Web MVC. На самом деле, из-за того, как веб-приложения создаются и разворачиваются, MVC является для них более естественным развитием, чем для настольных приложений.

Веб-приложение является категорией распределенных приложений. Хотя MVC довольно естественен для веб-приложений, в целом создавать распределенные приложения довольно сложно. Некоторая часть кода выполняется на сервере, в то время как другая на клиенте — то есть в браузере.

Говоря о веб-приложении в контексте MVC, существует три отдельных цикла данных и, следовательно, три реализации MVC: MVC на стороне сервера, внутренний MVC браузера и фронт-энд MVC. Браузер является посредником между тремя типами взаимодействия:

  1. Между кодом на стороне клиента (JS + HTML) и кодом на стороне сервера.
  2. Между пользовательским и серверным кодом.
  3. Между пользовательским и клиентским кодом.

Браузер имеет собственную Модель, Вид и Контроллер. Как разработчикам, нам не нужно беспокоиться об MVC браузере.

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

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

Adblock
detector