Чем frontend отличается от backend’а? объясняем на мемах

Двигаемся к Модели приложения (Application model)

Вскоре стало понятно, что Application State не может быть полностью изолирован от GUI. Всегда существует какая-то логика представления (Presentation logic) или состояние представления (View state), которые необходимо поддерживать.

Но это может вызвать проблемы. Давайте возьмем наш предыдущий пример счетчика. Когда наш счетчик достигнет 10, мы должны изменить цвет метки с черного на красный, чтобы указать предупреждение. Такое поведение изменения цвета на самом деле не является бизнес-логикой или задачей. Это чисто эстетическая часть (UX), которая должна быть учтена. Настоящий вопрос — где? Это должна быть Модель или Представление?

Поскольку эта Логика представления или Состояние представления в основном представляет собой состояние, полученное из Модели предметной области, оно должно поддерживаться в Модели. Но Модель предметной области, поддерживающая визуальный аспект, — то есть красный цвет — по определению не очень хорошо. Если же мы поместим это в объект Представление, то это создаст еще один набор проблем. Наш виджет больше не является шаблонным. Мы не можем использовать его в другом месте. Кроме того, добавление условия с жестко закодированным числом 10 в наш объект View означает, что мы ограничиваем некоторую часть бизнес-логики.

Чтобы решить эту проблему, в исходную MVC была добавлена еще одна сущность — Модель приложения (Application Model, AM). Как видно на рисунке, с Моделью приложения пара View-Controller не имеет прямого доступа к модели. Вместо этого они регистрируются в событиях Модели приложения и используют его для доступа к необходимым данным.

Потоки данных остаются такими же, как и у классического MVC. Конечно, у каждой модели есть свои плюсы и минусы, и AM-MVC не исключение. Наиболее заметная проблема заключается в том, что Application Model не имеет прямой ссылки на объект View и, следовательно, не может манипулировать им напрямую, даже если Application Model предназначена для поддержания состояния View.

Backend-разработчик

Чем занимается?

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

Технический стек

Backend-части часто пишут на PHP, JavaScript и Go; для больших приложений, например банковских, используется Java. У каждого языка, как и любого инструмента, своя область применения. Backend-разработчики активно используют фреймворки — каркасы приложений, в которых фундаментальный функционал уже оптимизирован, это позволяет сосредоточиться на более конкретных задачах.

Рабочий день

Рабочий день backend-разработчика зависит от места работы. В компаниях, занимающихся разработкой собственного продукта, более размеренный ритм, в котором есть пара больших сессий написания кода в день (по 2–3 часа), короткие встречи для синхронизации с командой, обсуждение архитектурных вопросов. У заказной разработки график более рваный: нужно общаться с заказчиками, быстро вносить правки и участвовать во встречах.

Тоже интересно: Чем занимается backend-разработчик в компании, которая делает игры?

Карьерный рост

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

Дальнейший рост может быть разным, как ветки прокачки в компьютерных играх: если вы прокачиваете технические навыки (hard skills), можно вырасти до уровня архитектора. Если вы чувствуете тягу к построению процессов, можно освоить методологии управления Scrum или Agile и обучать команды. Если есть уклон в классический менеджмент, можно вырасти до тимлидов и CTO (Chief Technical Officer, технический директор): в этой области нужно уметь организовывать и строить процессы, а также не бояться общаться с заказчиками.

Личные качества

Ответственность: на плечах такого специалиста лежит очень многое. Но самое главное качество программиста — научиться думать абстракциями. Если человек не может перейти с материального уровня на уровень функций, объектов, паттернов, то ему будет сложновато.

Александр Пряхин, работает в IT-менеджменте, до этого — backend-разработчик на PHP и Java: «Моя профессия нравится мне динамикой. То, что вчера казалось фантастикой, сегодня – реальность. Посмотрите, как Тони Старк в фильме „Железный человек“ 2010 года с телефона показывает видео на телевизоре. Сейчас это обыденность. Программисты создают экосистемы, цифровые миры, высокопроизводительные системы. Разве это не круто?»

Курс

Backend-разработчик

Освойте с нуля программирование на Go и бэкенд-разработку высоконагруженных приложений и станьте незаменимым специалистом. Дополнительная скидка 5% по промокоду BLOG.

Узнать больше

Что же мы сделали?

1. Во-первых, мы разработали и опубликовали три модуля, при этом нам даже не пришлось думать о компиляторе TS, WebPack, NPM или любых других инструментах, за исключением Bit. Именно поэтому я выбрал Bit и поэтому считаю его таким полезным инструментом. Он абстрагировал все шаги, необходимые для создания трёх компонентов, даже когда они работают в трёх разных средах.
2. Мы работали с локальной зависимостью, которая должна быть внешней зависимостью, и даже не заметили разницы. Каждое обновление, вносимое в локальную версию компонента с типами BFF, подхватывалось другими двумя компонентами, и нам не приходилось заново выполнять весь процесс экспорта.

одним

Что такое backend?

Бэкенд (англ. back-end) — это программно-аппаратная часть сервиса. Это набор средств, с помощью которых происходит реализация логики веб-сайта. Это то, что скрыто от наших глаз, т. е. происходит вне компьютера и браузера.

Как только вы введёте запрос на странице поисковика и нажмёте клавишу «Ввод», frontend закончится и начнётся backend. Ваш запрос отправится на сервер Яндекса или Google, т. е. по месту расположения алгоритмов поиска. Именно там и происходит вся «магия». Но вот, на мониторе появляются данные, которые вы запрашивали, — это происходит возвращение во frontend.

Также можно сказать, что backend — это процесс объединения пользователя с сервером.

Что касается backend-разработчика, то он использует любые инструменты, которые доступны на его сервере. На практике программисты применяют любой из универсальных языков: PHP, Ruby, Python, Java. Кроме того, при backend-разработке задействуются СУБД (MySQL, PostgreSQL, SQLite, MongoDB и пр.).

В зависимости от особенностей продукта меняются и обязанности backend-разработчика.

Чем занимаются фронтенд-разработчики

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

Что нужно знать фронтенд-разработчику:

• Языки: HTML, CSS, JavaScript, всё чаще требуется TypeScript.
• Фреймворки: React, Vue или Angular. Нужно уметь работать с одним из них.
• Дополнительные инструменты: работа с внешними расширениями через NPM или Yarn, настройка сборки фронтенда (например, Webpack).

Рассмотрим типичную задачу младшего фронтенд-разработчика.

Предположим, у команды есть проект на React и TypeScript. В него нужно добавить компонент, выводящий на страницу иконку. Иконка может быть разных цветов в зависимости от ситуации, в которой она появляется:

‘primary’ — основной цвет,

‘secondary’ — вспомогательный цвет,

‘error’ — цвет в случае ошибки,

‘success’ — цвет в случае успешной операции.

Все цвета заданы в дизайн-системе. Связь названий и цветов описана в файле utils.ts. Выглядит он примерно так:

// utils.ts

type TIconTypes = 'secondary' | 'primary' | 'error' | 'success';

export type TIconProps = { type: TIconTypes, onClick?:() => void; };
export const getIconColor = (type: TIconTypes) => {

  return `${
    type === 'secondary'
      ? '#8585AD'
      : type === 'error'
      ? '#E52B1A'
      : type === 'success'
      ? '#00CCCC'
      : '#F2F2F3'
  }`;
};

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

// icon.tsx

import React from 'react';
import { getIconColor, TIconProps } from './utils';

export const Icon = ({ type }: TIconProps) => {
  return (
    <svg
      xmlns="<http://www.w3.org/2000/svg>"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill={getIconColor(type)}
    >
      <path d="/* здесь будет длинный набор чисел, описывающих svg-изображение */"/>
    </svg>
  );
};

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

Это лишь небольшой пример задачи, но он наглядно демонстрирует необходимость понимания дополнительных технологий помимо HTML, CSS и JavaScript: например, React и TypeScript. То, какие технологии потребуются на конкретном проекте, определяет стек, принятый внутри команды или компании. Его нужно либо знать, либо быть готовым быстро в него погрузиться.

Пользовательский опыт

▍Поддержка устаревших браузеров (полифиллы)

полифиллыэтомCan I Use

• Angular. В документации к Angular есть особый раздел, посвящённый браузерной поддержке.
• React. Проекты, создаваемые с помощью Create React App, поддерживают, как и ReactDOM, браузеры, начиная с IE 9. Эта поддержка основана на использовании полифиллов.
• Vue. Здесь особенности поддержки устаревших браузеров описаны в к CLI.

▍Локализация и интернационализация

• Использование на сайте выпадающего списка с перечнем языков, поддерживаемых проектом.
• Доступ к сведениям о географическом местоположении пользователя (с помощью браузерного API Geolocation) и адаптация веб-сайта в соответствии с полученными данными.
• Указание сведений о языке в URL. Например, это может выглядеть так: , или так: , или даже так: .

• Angular. Angular, повторюсь, это полноценный фреймворк, он даёт разработчику готовое решение.
• React. Задачи интернационализации проектов можно решать с помощью популярной в React-среде библиотеки react-i18next.
• Vue. В решении рассматриваемых нами задач очень хорошо показывает себя библиотека vue-i18n.

▍Доступность контента

• Использование атрибута изображений .
• Применение ARIA-атрибутов для оформления описаний содержимого страниц сайта.
• Поддержка возможности изменения размеров текста.
• Наличие высококонтрастного режима.
• Поддержка навигации по сайту с использованием клавиатуры, в частности, клавиши и клавиш-стрелок.

a11yproject.com

Angular. В документации к этому фреймворку есть особый раздел. Разработка доступных проектов поддерживается и на уровне Angular CDK.
React. Речь о доступности ведётся и в документации к библиотеке React. Существует и специальная библиотека — react-a11y

Но эта библиотека больше не поддерживается, поэтому пользуйтесь ей с осторожностью и учитывайте то, что её планируется заменить на библиотеку react-axe.
Vue. Разрабатывать доступные проекты на Vue поможет плагин vue-a11y

При создании библиотеки vuetify тоже учтены соображения доступности.

Frontend developer – кто это

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

В работе необходимо использовать:

• JavaScript (Джава или Ява);
• HTML;
• CSS.

Разобравшись с особенностями frontend разработчика, кто это, чем занимается и за что отвечает, можно рассмотреть и общие положения. Так специалист несет ответственность за оптимизацию и адаптивность страниц, единое отображение во всех браузерах и на разных устройствах.

Разработчик frontend это тот, кто находится «на передовой» разработки. Участвует в оформлении и стабилизации внешнего вида и функционала.

Встречаются вакансии frontend junior, middle и senior. Чем больше знаний и опыта, тем выше level и заработная плата. Чаще компании ищут junior frontend developer, специалиста с базовыми знаниями обучают под себя, дают навыки создания дизайна. Нередко джуны, получив основы в компании, уходят в «свободное плавание».

Чем занимается фронтенд разработчик

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

Это происходит потому, что специалисты по поиску персонала и сами не понимают, для чего требуется сотрудник, поэтому обязанности от вакансии к вакансии плавающие. Чем на самом деле занимается фронтенд программист:

1. Разработка HTML-страницы сайта. Проводится с использованием как готовых макетов, так и по лично разработанным дизайн-макетам.
2. Верстка как самих сайтов разной сложности и вложенности, так и работа с шаблонами. Необходимо знание популярных CMS.
3. Разработка и установка скриптов для интерфейса. Настройка и визуализация анимации страниц, переходов, баннеров.
4. Создание пользовательского интерфейса для положительного опыта взаимодействия юзеров с сайтом.

Образец вакансии нередко включает обязанности engineers или designers. Но на практике фронтендер должен уметь взаимодействовать и работать над коллективным проектом с бэкенд разработчиками, дизайнерами, тестировщиками, аналитиками.

Разница в обязанностях бывает огромной. Поэтому полезно создать собственное резюме, где четко прописать все обязанности, которые способны выполнять. Frontend developer это прежде всего ответственный за визуальную часть и внешний функционал. Зарплата frontend разработчика напрямую зависит от его обязанностей и умений.

Front-end разработчик: кто это и чем он занимается

1. Верстка дизайна. На данном этапе происходит создание структуры html-кода, который вмещает в себя элементы, располагающиеся на страницах сайта (картинки, текст, кнопки и т. д.) и отображающегося в пользовательском окне браузера. Главная цель здесь – добиться того, чтобы каждый элемент дизайна был абсолютно идентичен макету. Помимо HTML здесь используется формальный язык программирования CSS.
2. Настройка функционирования кнопок, форм регистрации и обратной связи, галерей и прочего необходимого на сайте функционала. Для достижения высоких результатов Front-end должен применять готовый скрипт из библиотеки, либо создавать собственный.
3. После того как основная часть работы выполнена, он приступает к тестированию работы.
4. В дальнейшем он может давать рекомендации разработчикам касательно оптимального способа реализации той или иной функции на веб-ресурсе.

Как уже отмечалось, фронт-энд разработчик вбирает в себя несколько профессий: верстальщика и программиста. В отличие от обычного специалиста по верстке, который обладает навыками работы в HTML+CSS, в сферу его деятельности входит программирование интерактивных элементов, с которыми в дальнейшем контактирует посетитель сайта.

Web performance. Adopt

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

Важно, чтобы скорость интерфейсов была в культуре разработки

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

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

Для контроля бюджета нужно иметь мониторинг скорости работы приложения на основе данных от настоящих пользователей (RUM), желательно с автоматическими уведомлениями при достижении критических значений. Также нужно иметь синтетические тесты, которые исполняются в тестовом окружении. Желательно, чтобы такие тесты были интегрированы в процесс CI/CD: это позволит на раннем этапе замечать потенциальные проблемы и решать их до того, как они попадут к пользователям.

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

В нашем блоге мы подробно раскрывали тему производительности, рекомендуем ознакомиться:

• Клиентский мониторинг производительности
• Синтетический мониторинг производительности

Что нужно знать фронтенд разработчику?

Front-end разработка требует знание обширного набора инструментов и технологий. Каждый из них является неотъемлемой частью современной фронтенд-разработки.

К ним относятся:

1. HTML и CSS

Без HTML и CSS разработка внешнего интерфейса невозможна. Эти две технологии обеспечивают строение основополагающей части любого сайта.

Язык разметки HTML отвечает за то какие элементы должны находится на сайте. Например: кнопки, ссылки, формы заполнения полей, заголовки и т.д.

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

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

Любой человек, стремящийся стать первоклассным веб-разработчиком, должен иметь глубокое понимание и серьезный опыт работы с CSS и HTML. Эти две технологии просты для понимания и на youtube например, существует множество видеоуроков по ним.

2. JavaScript

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

Использование CSS, HTML и JavaScript позволяет разрабатывать как простые, так крупные продвинутые веб-приложения.

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

Несмотря на то, что это язык веб-сценариев, такие технологии, как Node.js, позволяют разрабатывать серверные приложения. Это один из самых популярных языков программирования, поэтому, независимо от вашего карьерного видения, изучение JavaScript выгодно любому программисту, разрабатывающие веб-приложения.

3. Frontend фреймворки (на JavaScript)

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

Одни из самых популярных фреймворков это:

• ReactJS
• Vue.js
• Angular

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

4. jQuery

jQuery — это JS библиотека, которая упрощает обработку событий, а также обход и манипулирование DOM элементом веб-сайта.

Почти 3 из 10 миллионов веб-сайтов используют jQuery. Это набор расширений и плагинов, которые ускоряют разработку с помощью JavaScript. jQuery обычно используется для:

• Манипуляции и событий с HTML тэгами
• Автоматической перестановки и изменение размеров макетов сетки
• Создания счетчика обратного отсчета
• Автозаполнение формы поиска

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

5. CSS препроцессор

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

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

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

На сегодняшний день доступны 2 популярных CSS препроцессоров. Это SASS и LESS. Оба отличаются синтаксисом

SASS гораздо более популярен среди веб-дизайнеров. Это может быть связано с тем, что SASS немного старше. Изначально LESS поддерживался хорошо зарекомендовавшим себя фреймворком Bootstrap. Но с версией 4 проект Bootstrap официально перешел на SASS, что еще больше повысило его популярность.

6. API-интерфейсы и службы RESTful

Другой набор передовых концепций, относящихся к frontend разработке — это API-интерфейсы и службы RESTful.

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

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

По сути REST — это набор руководящих принципов и практик, которые закладывают основу для эффективного взаимодействия веб-сервисов. То есть когда фронтенд разработчик делает запрос по определенному URL, получает от него ответ и обрабатывает полученные данные.

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

Frontend-разработчик

Чем занимается?

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

Технический стек

Чтобы быть успешным frontend-разработчиком, нужно освоить HTML, CSS и JavaScript. На HTML пишут «скелет» страницы, на CSS настраивают цвета, шрифты и ее внутреннее наполнение. После освоения статичных веб-страниц разработчик учится языку JavaScript, который позволяют добавить на сайт динамичные элементы: слайдеры, калькуляторы, анимации.

Рабочий день

Типичный рабочий день frontend-разработчика начинается со встречи или звонка, на котором обсуждаются задачи, приоритеты и проблемы. Затем он скачивает последние версии кода с GitHub (сервис для размещения проектов и совместной работы над ними), просматривает изменения и комментарии и начинает работать. Помимо этого, ему нужно изучать тематические ресурсы, чтобы быть в курсе современных трендов.

Карьерный рост

Начальный уровень в разработке — стажеры (trainee). Это начинающие специалисты, которые закончили курсы и получили базовые знания. Их зарплаты, как правило, не поднимаются выше 30 тыс. руб.

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

Мидл frontend-разработчик — это опытный человек, способный самостоятельно и качественно решить большинство задач. Его зарплата обычно начинается от 100 тыс. руб.

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

Курс 

Frontend-разработчик

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

Дополнительная скидка 5% по промокоду BLOG.

Узнать больше

Личные качества

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

Алексей Видякин, frontend-разработчик: «Я работаю frontend-разработчиком в сфере рекламы и маркетинга. Больше всего в работе мне нравится, что можно видеть результат сразу же после написания кода. HTML, CSS и JavaScript позволяют визуализировать свои или дизайнерские идеи, сделать интерфейс приложения удобным и понятным для пользователя».

Inner source. Assess

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

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

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

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

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

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

Паттерн BFF

1. Клиентское приложение остаётся «глупым», и это предпочтительно с точки зрения безопасности и простоты использования. Чем глупее должны быть клиентские приложения, тем быстрее другие команды смогут создавать клиентские приложения. Кроме того, основная бизнес-логика и необходимая обработка данных остаются сокрытыми на стороне бэкенда.
2. Увеличение задержки из-за дополнительного подключения в бэкенде теоретически должно быть меньше, чем влияние потребления дополнительных ресурсов во фронтенде.

1. Из-за нового элемента (т.е. ещё одного сервиса) архитектура системы усложняется. В нашем примере рассматривается только один BFF, но потенциально вы можете создавать по одному BFF для каждого типа клиентских приложений.
2. Из-за BFF-сервиса существует тесная косвенная связь между бэкендом и фронтендом. Да, смысл BFF на самом деле в том, чтобы контракт между бэком и фронтом был именно таким, какой нужен клиенту, что до минимума снижает вероятность внесения изменений в будущем. Однако эта вероятность никогда не равна нулю, и модификации в бэкенде или фронтенде подразумевают непосредственное изменение на другой стороне. То есть они связаны.

Инструменты

Теперь вы знаете, что за пользовательскую часть сайта отвечает frontend-разработка. Главная задача разработчика — создать понятный интерфейс, с которым будет легко взаимодействовать. Frontend — это не только дизайн, но и код, который помогает взаимодействовать с пользователем.

Какие инструменты нужны, чтобы создать клиентскую часть сайта?

HTML — содержание сайта

За содержание сайта отвечает язык гипертекстовой разметки HTML. Это не язык программирования, но он поможет наполнить сайт необходимой информацией и расположить её в нужных частях страницы. Всё, что вы видите на сайте, — это HTML-файл. Но просто HTML-страница без оформления выглядела бы очень скучно и непривлекательно. Поэтому, чтобы оформить сайт, сделать его приятным для восприятия, нужен инструментарий CSS. Самые широкие возможности, включая адаптивности дизайна и анимацию, предоставляет версия HTML5, на которую сегодня и стоит ориентироваться.

 CSS — оформление сайта

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

JavaScript — интерактивность сайта

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

jQuery — фреймворк языка JavaScript

Библиотека с набором готовых функций, которые упрощают написание JavaScript-кода. Фреймворк позволяет не писать код заново, а подобрать подходящую часть из готового набора.

Сеть и производительность

▍Размер бандла приложения

Использование интернета в мире (источник — broadbandsearch.net)

• Angular. Бандлы Angular-приложений легко и удобно исследовать с помощью webpack-bundle-analyzer. Более того, CLI Angular даёт в наше распоряжение опцию , которая позволяет сформировать отчёт после сборки бандла.
• React. В документации к Create React App есть страница, посвящённая анализу размеров бандлов.
• Vue. Во Vue, как и в Angular, есть опция , которая позволяет формировать отчёты по бандлам.

▍Сервис-воркеры и прогрессивные веб-приложения

• Angular. В Angular предусмотрены механизмы для использования сервис-воркеров.
• React. Вот руководство по разработке PWA с помощью Create React App.
• Vue. Возможность создания PWA во Vue поддерживается на уровне CLI.

▍Серверный рендеринг

• Улучшение SEO сайтов.
• Ускорение вывода сайтов в браузере.

• Angular. Тут используется Angular Universal.
• React. Для серверного рендеринга React-приложений применяется Next.js.
• Vue. Серверный рендеринг Vue-приложений выполняют с помощью фреймворка NuxtJS.

▍Генераторы статических сайтов

Jamstack

• Скорость: генераторы статических сайтов создают страницы сайтов во время сборки проекта, а не тогда, когда эти страницы запрашиваются клиентом.
• Безопасность: применение SSG позволяет отказаться от систем управления контентом (CMS, Content Management System), которые часто оказываются целями хакерских атак.
• Упрощение масштабирования: веб-проект при применении SSG представляет собой набор файлов, который можно передать клиенту откуда угодно. Это значительно упрощает хранение подобных файлов в CDN. В результате оказывается, что статические сайты очень хорошо масштабируются.
• Упрощение процесса разработки: SSG-проектам не нужна серверная часть и база данных. Это облегчает труд разработчиков.

• Angular. Scully.
• React. Gatsby (React + GraphQL), Next.js.
• Vue. Gridsome, Nuxt.

11tyHugoJekyll