Содержание

Как стать Front-End разработчиком / Хабр

Кто такой Front-End разработчик?

Front-End разработчик это человек который пишет код для внешнего вида сайта, также есть Back-End разработчик который пишет код для функциональной части сайта. Если скрестить эти две профессии получится Full-Stack разработчик

1. Азы которые нужно знать

Для написания Front-End кода можно использовать множество языков, но для начала я советую вам начать изучения с «языка» HTML. С помощью его вы сможете делать конечно не сайты, но стандартные интернет страницы с текстом, картинками и т.д, но HTML-я вам конечно же не хватит что бы считать себя Front-End разработчиком. Способов изучить HTML есть много их мы разберём немного позже

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

Что бы хорошо писать дизайн для сайта вам не всегда хватит языка CSS, поэтому вам нужны азы JavaScript-а. Но если-же вы полностью выучите язык JavaScript и Node.js вы вполне сможете писать даже Back-End и стать Full-Stack разработчиком

2. Время

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

3. Математика

Долго мы на этом заостряться не будем, если ты хорошо знаешь математику-отлично, если не очень это не беда. Тут вполне хватит курса математики до 9 класса

4. Обучающие ресурсы

Для азов HTML и CSS посоветую эти видео
HTML: www.youtube.com/watch?v=5pBcKKiZSGE
CSS: www.youtube.com/watch?v=iPV5GKeHyV4
После можете читать и узнавать аспекты HTML и CSS на htmlbook.ru

Для азов JavaScript советую это видео
www.youtube.com/watch?v=Bluxbh9CaQ0&t=5328s

Потом JavaScript во всех аспектах можно доучить на learn.javascript.ru

Front-end разработка — wiki студи Клондайк

  • Фронтенд (англ. front-end) — клиентская сторона пользовательского интерфейса. Этро все, что видит пользователь открывая страницу.

  • Бэкенд (англ. back-end) — программно-аппаратная часть.



Путаница в вакансиях front-end developer, front end разработчик», фронтендщик, фронтенд девелопер, web developer, фронтенд-разработчик, веб-верстальщик — это не одно и тоже. Фронтенд-разработчик не просто верстает макеты. Он хорошо знает JavaScript, разбирается во фреймворках и библиотеках (и активно юзает часть из них), понимает, что находится «под капотом» на серверной стороне. Его не пугают препроцессоры и сборщики LESS, SASS, GRUNT, GULP, он умеет работать с DOM, API, SVG-объектами, AJAX и CORS, может составлять SQL-запросы и копаться в данных. Также добавляются UI/UX-проектирование, адаптивная верстка, кросс-браузерность и кросс-платформенность, а иногда и навыков мобильной разработки.


front-end разработка — это создание клиентской части сайта. Front-end разработчик занимается версткой шаблона сайта и созданием пользовательского интерфейса. Обычно front-end разработчик — это мастер на все руки. Он просто обязан обладать талантом дизайнера, быть искусным верстальщиком и хорошим программистом.

Современный front-end developer должен легко владеть html5, css3, JavaScript (и как минимум JQuery). У каждого front-end специалиста есть свои наработки, которые он хранит в виде framework. Многие разработчики в работе пользуются популярными framework-ами, такими как: Twitter, Bootstrap, Foundation 3, Compass.


Что необходимо знать frond-end разработчику:


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

Вот основные базовые навыки:


    HTML и CSS

    Для простого понимания HTML — это тело человека, а CSS — это одежда

    В том числе сетки и CSS-фреймворки, спецификации W3C и WHATWG, HTML5/CSS3 Polyfills, HTML5 API


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

    • Atom

    • Visual Studio Code

    • Brackets

    • Sublime Text

    • Notepad++

    • Netbeans

    IDE

    • WebStorm

    • Zend Studio

    • Aptana

    • Komodo IDE

    HTML (HyperText Markup Language) говорит браузеру, каково содержание страницы, например, «заголовок», «параграф», «список», «элемент списка».

    CSS (Cascading Style Sheets) говорит браузеру, как отображать элементы, например, «после первого параграфа отступ в 20 пикселей» или «весь текст в элементе body должен быть темно-серым и написан шрифтом Verdana».


    CSS-препроцессоры


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

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

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


    Методологии именования:

    • БЭМ

    • CSS Modules

    • SMACSS

    • OOCSS

    Популярные CSS-препроцессоры

    • Less — использует JavaScript или Node.js

    • Sass (SCSS) — компилируется с помощью Ruby

    • Stylus

    БЫЛО:


<div>
        <div>
               <div></div>
       </div>
</div>


СТАЛО


.\@sidebar.\$main { ... }
.\@sidebar.\$wrapper { ... }
.\@sidebar.\$wrapper.color\:red { ... }


HTML-препроцессоры


По аналогии с CSS-препроцессорами аналогичные технологии для HTML с целью упростить написание кода и скоратить время

JavaScript

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


JS-framework’и

JS-framework’и — это инструменты для построения динамических веб/мобильных/настольных приложений на языке Javascript. Как и к любым другим инструментам, разработчики прибегают к использованию js-фреймворков там, где невозможно/очень сложно/очень долго выполнять задачу обычными средствами.

Фреймворки для фронтенд-разработки

  • React.js

  • Vue.js

  • Angular

  • jQuery

  • Node.js

Фреймворки для работы с данными

Сборщики Gulp, WebPack

Менеджеры задач Gulp и Grunt, работающие через NPM — Node Package Manager. Также полезно попробовать сборщик модулей Webpack.


Система управления версиями файлов (Git, GitHub, CVS и т. д.)


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

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

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

    Если вышеописанный вариант не подходит по каким-либо причинам, можно использовать инструменты вроде UglifyJS или Closure Compiler, которые грамотно сжимают необходимый код, а затем конкатенируют эти сжатые файлы перед выдачей результата.

    Если же код пишется на чистом CSS — то есть не используется препроцессор вроде Sass или Stylus — RequireJS также поможет организовать необходимые CSS файлы по модульному принципу. Просто необходимо использовать @import в основном файле, чтобы загрузить зависимости для разработки и затем запустить средство оптимизации RequireJS для основного файла чтобы создать готовый для использования файл.



    Инструменты разработчика, встроенные в браузер


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


    Командная строка

    Есть несколько задач, которые необходимо выполнять через командную строку не задумываясь:

    1. ssh для подключения к другой машине или серверу
    2. scp для копирования файлов на другую машину или сервер
    3. ack или grep для поиска файлов в проекте по строке или шаблону
    4. find для обнаружения файлов, чьи названия совпадают с данным шаблоном
    5. git для выполнения хотя бы базовых действий вроде add, commit, status и pull
    6. brew для использования Homebrew для установки пакетов
    7. npm для установки пакетов Node
    8. gem для установки пакетов Ruby

    Тестирование

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

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


    Инструменты

    • Mocha

    • Jasmine

    • QUnit

    • Jest

    • Ava

    Автоматизация процесса

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


    Видео нашего учебного центра

    Основы HTML для начинающих



    CSS для чайников



    Основы JavaScript для начинающих




    Дружный коллектив сотрудников-экспертов

    Просторный и светлый офис в центре Москвы

    Зарабатывайте больше вместе с компанией

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

    Перевод статьи «Front End Developer vs Back End Developer – Definition and Meaning In Practice».

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

    Многослойность разработки

    Не важно, работаете вы над сайтом или нативным iOS-приложением: все окружения разработки имеют нечто общее, а именно — фронтенд и бэкенд.

    Линия разграничения между ними может быть довольно размытой, особенно с учетом роста популярности JavaScript и бессерверных технологий. Когда инструментарий фронтенда и бэкенда становится общим, мы порой можем задуматься, а не относимся ли мы к full stack разработчикам. Спойлер: не относимся. По крайней мере, не все.

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

    А некоторые люди наоборот — лучше всего проявляют себя, создавая API в бэкенде приложения, а UI создают только в виде прототипов.

    В чем разница между фронтенд- и бэкенд-разработкой?

    Даже если вы full stack разработчик, это не означает, что при работе над проектом у вас не будет разделения труда.

    Что из себя представляют обе части разработки?

    Что такое фронтенд-разработка?

    Фронтенд приложения обычно охватывает слой пользовательского интерфейса (UI). А UI бывает и на статических сайтах, и на полнофункциональных React-приложениях.

    Как выглядела фронтенд-разработка раньше?

    В настоящее время миром фронтенда правит JavaScript, но так было не всегда. Раньше этот язык использовали для добавления некоторой интерактивности на сайте, но вообще фронтенд рендерился благодаря использованию языков бэкенда, таких как PHP и Perl.

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

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

    К наиболее традиционным инструментам фронтенда можно отнести следующие:

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

    Что собой представляет фронтенд-разработка в настоящее время?

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

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

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

    Сегодня широко используются следующие инструменты фронтенд-разработки:

    • UI-фреймворки вроде React или Vue,
    • веб-фреймворки, такие как Gatsby,
    • компиляторы (Babel),
    • сборщики (Webpack),
    • CSS-инструменты, например Sass.

    Но API (хоть платные, хоть разработанные нами лично), должны где-нибудь создаваться. Так мы подходим к теме бэкенда.

    Что такое бэкенд-разработка?

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

    Как бэкенд-разработка выглядела раньше?

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

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

    К традиционным инструментам бэкенда можно отнести следующие:

    • локально или удаленно управляемые серверы, например Rackspace,
    • HTTP-серверы, использующие Apache,
    • базы данных, например MySQL,
    • серверные языки (PHP или Perl),
    • фреймворки приложений, такие как Ruby on Rails.
    Что собой представляет бэкенд-разработка сейчас?

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

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

    Также может полностью отличаться работа самого сервера. Раньше мы запускали наш Python-код на управляемом нами сервере (это мы и сейчас можем). Теперь мы также можем использовать бессерверные функции — благодаря таким инструментам как AWS Lambda, упрощающим управление кодом.

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

    Сегодня распространены следующие инструменты бэкенда:

    • облачные серверы вроде AWS EC2,
    • бессерверные сервисы, такие как AWS Lambda,
    • базы данных NoSQL (MongoDB),
    • такие языки как Python или JavaScript (последний — с применением NodeJS),
    • фреймворки веб-приложений, например Serverless Framework.

    Сумеречная зона

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

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

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

    Фронтенд или бэкенд

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

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

    Учебные ресурсы

    Фронтенд

    Бэкенд

    Для обоих направлений

    Как стать фронтенд-разработчиком в 2018 году / Блог компании RUVDS.com / Хабр

    Камран Ахмед, автор материала, перевод которого мы сегодня публикуем, говорит, что занимается фуллстек-разработкой уже 5 лет и в настоящее время работает на должности ведущего инженера в компании tajawal. Там ему приходится заниматься многими вещами. Ему, по долгу службы, надо быть в курсе того, что происходит в мире веб-разработки, кроме того, одна из его задач заключается в том, чтобы поддерживать знания и навыки других разработчиков в хорошем состоянии. По его словам, наблюдение за развитием технологий — это не только его работа, но и хобби. Ему приходилось видеть сложности, с которыми сталкиваются начинающие программисты (и опытные — тоже), когда речь заходит об оперативном освоении новшеств. Камрану, в прошлом году, часто приходилось отвечать на вопросы о том, в чём нужно ориентироваться для того, чтобы оставаться современным и востребованным программистом. В результате он, для того, чтобы помочь себе и другим, решил подготовить схемы, ссылки на которые отвечали бы на большинство вопросов, которые ему обычно задают.


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

    Обзор

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

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

    План развития фронтенд-разработчика

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

    Изучение основ HTML

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

    • Основы HTML и правила написания HTML-кода.

    • Способы разделения страниц на части и правильное структурирование DOM.

    ▍Задание

    После того, как вы освоите основы HTML, создайте как минимум 5 HTML-страниц. Я порекомендовал бы выбрать любой веб-сайт — например, страницу профиля на GitHub, или страницу входа в Twitter, и воссоздать её, обращая особое внимание на структурирование элементов страницы. То, что получится, будет не таким уж и красивым, но беспокоиться пока об этом не стоит. Самое главное сейчас — структура.

    Изучение основ CSS

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

    • Синтаксис и свойства CSS.

    • Блоковая модель, разработка макетов с использованием технологий Grid и Flexbox.

    • Разработка отзывчивых сайтов с использованием медиа-запросов.

    ▍Задание

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

    Изучение основ JavaScript

    JavaScript — это технология, которая позволяет сделать HTML-страницы интерактивными. Например, средствами JavaScript создают все те слайдеры, всплывающие окна, уведомления, которые вы видите на веб-сайтах. JS даёт возможность перезагрузки частей страниц без необходимости перезагрузки страниц целиком. На данном шаге вам нужно освоить основы JavaScript и приготовиться к самому интересному. Изучая JS, обратите внимание на следующее:

    • Изучите синтаксис и базовые конструкции языка.

    • Освойте методики работы с DOM средствами JS, то есть, например, разберитесь с тем, как добавлять элементы на страницу и удалять их с неё, как работать с классами элементов, как применять CSS-стили.

    • После освоения основ разберитесь с более продвинутыми вещами, такими, как области видимости, замыкания, поднятие функций, всплытие событий, и так далее.

    • Разберитесь с тем, как выполнять HTTP-запросы из JS-кода с использованием технологий XHR или Ajax. Именно Ajax позволяет выполнять какие-либо действия, обычно требующие перезагрузки страниц, не перезагружая их целиком.

    • Далее — уделите время изучению новых возможностей языка, того, что появилось в ES6+. ES6 — это версия JavaScript, в которой имеется множество интересных обновлений, таких, как классы, различные способы объявления переменных. Тут появились новые методы массивов, средства для конкатенации строк, и так далее. Большинство материалов по ES6, которые вам попадутся, будут использовать Babel в процессе разъяснения особенностей новых возможностей языка. Babel — это транспилятор, он конвертирует, условно говоря, «новый» JavaScript-код в «старый». Нужно это для того, чтобы новый код работал в старых браузерах. Пока, однако, не обращайте внимания на Babel. Ваша задача — понять основы JS и научиться пользоваться этим языком в современных браузерах. Ниже мы ещё поговорим о ES6.

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

    Стоит ли изучать jQuery?

    В былые времена слово «jQuery» было у всех на устах, и у такого положения дел были веские причины. Это — мощная библиотека, которая основана на JavaScript и позволяет решать множество задач, не заботясь об особенностях различных браузеров. Все эти особенности учтены при разработке библиотеки. Но теперь дни бешеной популярности jQuery прошли, эту библиотеку уже не так активно используют для новых проектов, однако, кое-кто ей всё ещё пользуется. Изучать jQuery необязательно, но освоить эту библиотеку несложно, а сделав это, вы приобретёте навыки, которые вполне могут вам пригодиться.

    Практика

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

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

    После того, как вы достаточно попрактикуетесь, придёт время заняться настоящими делами. Загляните на github.com, найдите подходящий опенсорсный проект и постарайтесь внести в него посильный вклад, создав несколько пулл-реквестов. Вот несколько идей, касающихся вклада в опенсорс:

    • Улучшите интерфейс, дизайн, добавьте какой-нибудь странице интерактивности.

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

    • Найдите код, который можно улучшить, и выполните его рефакторинг.

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

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

    После того, как вы освоите всё то, о чём шла речь выше, вы имеет полное право это отпраздновать. Если вы ответственно подошли к изучению HTML, CSS и JavaScript, вы уже можете найти себе какую-нибудь работу, возможно — это будет фриланс, а может быть — и настоящая работа. Однако если вы хотите профессионального роста, на этом останавливаться не стоит. Впереди — большой и интересный путь.

    Менеджеры пакетов

    До этого момента, если вы пользовались какими-нибудь внешними библиотеками, например, плагинами или виджетами, вам приходилось самостоятельно загружать JS и CSS-файлы и добавлять их в проект. Когда у того, чем вы пользовались, выходила новая версия, вам, опять же, самостоятельно, приходилось эту новую версию загружать. Это — довольно скучная и утомительная задача. Менеджеры пакетов способны вас от этого избавить. Они помогают включать в проекты внешние библиотеки и плагины, делая это таким образом, что разработчику не приходится беспокоиться о том, чтобы вручную копировать необходимые файлы в проект и следить за выходом их новых версий. В частности, речь идёт о менеджерах пакетов yarn и npm. И тот и другой, в общем-то, представляют собой практически одно и то же, различия между ними не так уж и велики, и вы можете изучить любой из них, после чего другой покажется вам очень знакомым.

    Практика

    Теперь, когда вы освоили основы работы с менеджерами пакетов, подключите какие-нибудь внешние библиотеки к страницам, которые вы разрабатывали, когда осваивали HTML, CSS и JavaScript. Например, это может быть какой-нибудь плагин для вывода всплывающих уведомлений при щелчке по кнопке. Можете воспользоваться библиотекой для проверки данных, вводимых в форме. Поэкспериментируйте с настройками, разберитесь с тем, как устанавливать различные версии библиотек. Занимаясь этим, почитайте о семантическом версионировании.

    Препроцессоры CSS

    Препроцессоры расширяют возможности CSS, давая стилям функционал, недоступный при их стандартном использовании. Существует множество препроцессоров: Sass, Less, Stylus, PostCSS, и другие. Если бы мне пришлось бы выбрать один из них, я остановился бы на Sass. Однако в последнее время весьма интересно выглядит препроцессор PostCSS, умение обращаться с ним вам точно не помешает, это что-то вроде Babel для CSS. Его можно использовать автономно или поверх Sass. На данном этапе вашего обучения я порекомендовал бы освоить Sass, а позже, когда у вас будет время, разобраться с PostCSS.

    CSS-фреймворки

    В принципе, изучать CSS-фреймворки вам необязательно, однако, если вы решите освоить какой-нибудь из них, знайте, что существует их очень много. Из того, что я пробовал, мне больше всего понравились Bootstrap, Materialize и Bulma. Если вы выбираете фреймворк с учётом его рыночной востребованности, обратите внимание на Bootstrap. Я бы точно выбрал его, если бы сейчас задумывался об освоении CSS-фреймворка.

    Организация CSS

    По мере роста вашего веб-приложения растёт и объём CSS, в описания стилей проникает беспорядок, ими становится тяжело управлять. Существует множество способов структурирования CSS с учётом нужд масштабирования. Тут можно отметить OOCSS, SMACSS, SUITCSS, Atomic, BEM. Вам следует получить представление о них, понять различия между ними. Я бы в подобной ситуации, для более глубокого изучения, выбрал BEM.

    Средства для сборки проектов

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

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

    В области линтеров, опять же, существует масса вариантов: ESLint, JSLint, JSHint, JSCS. Однако сейчас наибольшей популярностью пользуется ESLint, поэтому вы вполне можете остановиться на нём.

    В вопросе инструментов для создания пакетов можно наблюдать ту же ситуацию. Тут есть Parcel, Webpack, Rollup, Browserify, и так далее. Если вы хотите выбрать какой-то один, можете без лишних раздумий остановиться на Webpack. Rollup тоже весьма распространён, но его рекомендуется использовать, в основном, для библиотек. Если же речь идёт о веб-приложениях — тогда вам нужен Webpack. Поэтому освойте Webpack, а позже, если хотите, разберитесь с Rollup.

    Практика

    После того, как вы освоите всё то, о чём шла речь выше, у вас появится очередной повод для праздника. Фактически, вы теперь стали современным JS-разработчиком примерно на 75%. Помните о том, что практика — это очень важно, поэтому создайте какой-нибудь проект, используя всё то, что уже изучили. Может быть — это будет некая библиотека, в которой будут применены возможности Sass и JavaScript. Завершив работу, используйте Webpack для преобразования Sass в CSS, примените babel для транспиляции ES6-кода. А когда всё будет готово — опубликуйте свою разработку на GitHub и выложите в npm.

    Выбор фреймворка

    В старой версии схемы, которую мы рассматриваем, шаг выбора фреймворка следовал сразу за освоением основ, но теперь я поместил его после Sass, инструментов для сборки проектов и менеджеров пакетов, так как всем этим вы будете пользоваться при работе с фреймворками.
    В том, что касается выбора фреймворка, можно отметить несколько вариантов, однако наиболее распространёнными являются React, Vue и Angular. Причём в наши дни потребность рынка в React.js всё растёт и растёт. Однако выбрать можно любой из перечисленных фреймворков. Я бы, например, выбрал React или Angular. Стоит отметить, что вам, как начинающему разработчику, Angular может показаться проще в сравнении с React, возможно, из-за того, что Angular поддерживает практически всё, что нужно для работы, что называется, «из коробки». Это — мощный маршрутизатор с поддержкой ленивой загрузки, HTTP-клиент, поддерживающий перехватчики, средства для внедрения зависимостей, инкапсуляция CSS компонентов, и так далее. Используя Angular, вы будете избавлены от забот о подборе внешних библиотек. Однако React пользуется большей популярностью, вокруг него сложилось замечательное сообщество, Facebook активно занимается его развитием. Тут мне хочется отметить, что выбирать фреймворк, основываясь только лишь на его «популярности» не стоит. Лучше всего — оценить альтернативные варианты, сравнить их, «примерить» их к нуждам своего проекта и сделать выбор.

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

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

    Кривые обучаемости для React и Angular

    После выбора фреймворка для освоения, вам придётся выбрать и ещё кое-что. Например, если ваш выбор пал на React, вам может понадобиться изучить Redux или Mobx для целей управления состоянием приложения. Что именно выбрать — зависит от размера приложения, над которым вы будете работать. Mobx подходит для малых и средних приложений. Redux лучше подходит для крупных проектов. Кроме того, возможно, что ни Redux, ни Mobx могут вам и не понадобиться, и ваше приложение вполне сможет обойтись стандартными средствами для управления состоянием, присутствующими в React.

    Если вы выбрали Angular, вам понадобится изучить TypeScript. Разрабатывать Angular-проекты можно и без TypeScript, но, всё же, рекомендуется применять именно этот язык. Кроме того, вам надо будет освоить и RxJS — это очень вам пригодится при разработке Angular-приложений. Это — по-настоящему мощная библиотека, которая, кроме того, подходит для функционального программирования.

    Если вы выберете Vue.js, то вам может понадобиться изучить Vuex. Эта библиотека очень похожа на Redux, но предназначена для Vue.

    Тут следует понимать, что Redux, Mobx и Rx.js не привязаны к соответствующим фреймворкам. Эти библиотеки можно использовать и в приложениях, написанных на чистом JavaScript. И, если вы выбрали Angular — обратите внимание на то, что это должен быть Angular 2+, а не Angular 1+.

    Практика

    Теперь вы знаете практически всё, что может понадобиться для разработки современных веб-приложений. Не забывая о практике, создайте что-нибудь на основе выбранного фреймворка. Если вам нужны идеи — поищите в интересных вам GitHub-репозиториях папки ideas, выберите то, что вам понравится, и приступайте.

    После того, как вы сделаете то, что решили сделать — почитайте материалы об измерении и улучшении производительности. Например, обратите внимание на такие вещи, как Interactivity Time, Page Speed Index, Lighthouse Score, и так далее.

    Прогрессивные веб-приложения

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

    Тестирование приложений

    В сфере тестирования существует масса инструментов, ориентированных на различные цели. Я, в основном, пользуюсь комбинацией из Jest, Mocha, Karma и Enzyme. Однако прежде чем вы выберете свою библиотеку для тестирования, полезно будет разобраться с различными типами тестов, проанализировать доступные инструменты и выбрать те, которые лучше всего вам подходят. Вот хороший материал о современных средствах JS-тестирования.

    Статическая проверка типов

    Средства для статической проверки типов помогают контролировать типы данных в JavaScript-приложениях. Нельзя сказать, что изучать их обязательно, но они, определённо, способны принести огромную пользу, да и освоить их, вывести на уровень практического использования, можно буквально за несколько часов. Я, в основном, имею в виду TypeScript и Flow. Лично я отдаю предпочтение TypeScript, но вам советую опробовать и то и другое, а потом уже решить — что вам больше понравится.

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

    Если вы изучили всё то, о чём мы говорили, ваших знаний будет достаточно для того, чтобы получить должность фронтенд-разработчика. Однако, это — не повод останавливаться.
    Изучите возможности серверного рендеринга в выбранном вами фреймворке. Как именно это будет выглядеть — зависит от фреймворка. Например, в сфере React особое внимание стоит обратить на Next.js и After.js. В случае с Angular — это Universal. Если речь идёт о Vue, то это — Nuxt.js.

    Итоги

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

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

    Frontend- и backend-разработка на примере создания сайтов — статьи на Skillbox

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

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

    Любой запрос, который делает пользователь, передается на сервер. Вся работа происходит там. Запрос обрабатывается, фильтруется, а ответ отправляется обратно. Backend-разработка отвечает за правильное выполнение этого процесса.

    Функции Frontend и Backend

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

    Связка Frontend и Backend

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

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

    Frontend отвечает за то, как выглядит продукт.

    Backend — за то, как этот продукт функционирует.

    Есть несколько клиентов. Клиентами могут быть обычные браузеры на компьютере или мобильном устройстве. Один из клиентов — браузер вашего компьютера. Вы хотите получить информацию из интернета. Делаете запрос: вводите ваш вопрос в поисковик Yandex или Google. Сразу же открывается страница с необходимой вам информацией.

    Как это работает на самом деле? Ваш клиент, он же браузер, отправляет запрос на сервер. Сначала на сервер пользователя — frontend. Frontend-сервер (компьютер) обрабатывает запрос, выбирает backend-сервер, который в данный момент свободен, и отправляет ему запрос из браузера. Backend-сервер обрабатывает запрос, обращается к базе данных и посылает ответ на запрос обратно frontend-серверу. А frontend, так как он отвечает за удобство пользователя, уже отображает ответ на запрос в виде HTML-страницы.

    Передача данных

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

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

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

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

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

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

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

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

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

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

    Что такое frontend и backend-разработка

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

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

    Курс «Профессия Веб-разработчик»

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

    • Живая обратная связь с преподавателями
    • Неограниченный доступ к материалам курса
    • Стажировка в компаниях-партнёрах
    • Дипломный проект от реального заказчика
    • Гарантия трудоустройства в компании-партнёры для выпускников, защитивших дипломные работы

    Ещё 9 проектов для оттачивания Front-End мастерства / Блог компании Edison / Хабр

    Введение

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

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

    Vue и Angular, конечно же, также имеют свою законную базу поклонников. И еще есть Svelte и другие универсальные фреймворки, такие как Next.js или Nuxt.js. И Gatsby, и Gridsome, и Quasar… и многое другое.

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

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



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

    Приложение для поиска фильмов с помощью React (с хуками)

    Первое, с чего вы могли бы начать, — это создать приложение для поиска фильмов с помощью React. Ниже приведено изображение того, как будет выглядеть финальное приложение:

    Что вы узнаете

    Создавая это приложение, вы улучшите свои навыки React, используя сравнительно новый API Hooks. В примере проекта используются компоненты React, множество хуков, внешний API и, конечно, некоторые стили CSS.

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

    • React с hook’ами

    • create-react-app

    • JSX

    • CSS

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

    Приложение чата с помощью Vue

    Еще один отличный проект для вас — создать приложение чата, используя мою любимую библиотеку JavaScript: VueJS. Приложение будет выглядеть примерно так:

    Что вы узнаете

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

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

    • Vue

    • Vuex

    • Vue Router

    • Vue CLI

    • Pusher

    • CSS

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

    Красивое приложение для просмотра погоды с Angular 8

    Этот пример поможет вам создать красивое приложение для просмотра погоды с помощью Angular 8:

    Что вы узнаете

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

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

    • Angular 8

    • Firebase

    • Рендеринг на стороне сервера

    • CSS с сеткой и Flexbox

    • Mobile friendly и адаптивность

    • Темный режим

    • Красивый интерфейс

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

    To-Do приложение с помощью Svelte

    Svelte это как новый ребенок в компонентном подходе — по крайней мере, похожий на React, Vue и Angular. И это одна из самых горячих новинок на 2020 год.

    To-Do приложения не обязательно являются самой горячей темой, но это действительно поможет вам оттачивать свои навыки Svelte. Это будет выглядеть так:

    Что вы узнаете

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

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

    • Svelte 3

    • Компоненты

    • Стилизация с помощью CSS

    • Синтаксис ES 6

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

    Приложение для электронной коммерции с помощью Next.js

    Next.js является самым популярным фреймворком для создания приложений React, которые поддерживают рендеринг на стороне сервера из коробки.

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

    Что вы узнаете

    В этом проекте вы узнаете, как разрабатывать с помощью Next.js — создавать новые страницы и компоненты, извлекать данные, а также стилизовать и развертывать приложение Next.

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

    • Next.js

    • Компоненты и страницы

    • Выборка данных

    • Стилизация

    • Развертывание проекта

    • SSR и SPA

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

    Полноценный мультиязычный блог с Nuxt.js

    Nuxt.js для Vue, тоже что и Next.js для React: отличный фреймворк для объединения возможностей рендеринга на стороне сервера и одностраничных приложений
    Последнее приложение, которое вы можете создать, будет выглядеть так:

    Что вы узнаете

    В этом примере проекта вы узнаете, как создать полноценный веб-сайт с использованием Nuxt.js — от начальной настройки до окончательного развертывания.

    Он использует множество интересных функций, которые Nuxt может предложить, например, страницы и компоненты, а также стилизацию с помощью SCSS.

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

    • Nuxt.js

    • Компоненты и страницы

    • Storyblock модуль

    • Миксины

    • Vuex для управления состоянием

    • SCSS для стилизации

    • Nuxt middlewares

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

    Блог с Gatsby

    Gatsby — отличный генератор статических сайтов, использующий React и GraphQL. Это результат проекта:

    Что вы узнаете

    В этом руководстве вы узнаете, как использовать Gatsby для создания блога, который вы будете использовать для написания своих собственных статей, используя React и GraphQL.

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

    • Gatsby

    • React

    • GraphQL

    • Плагины и темы

    • MDX/Markdown

    • Bootstrap CSS

    • Шаблоны

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

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

    Блог с Gridsome

    Gridsome для Vue… Хорошо, у нас уже было это с Next/Nuxt.
    Но то же самое верно для Gridsome и Gatsby. Оба используют GraphQL в качестве слоя данных, но Gridsome использует VueJS. Это также потрясающий генератор статических сайтов, который поможет вам создавать отличные блоги:

    Что вы узнаете

    Этот проект научит вас, как создать простой блог, чтобы начать работу с Gridsome, GraphQL и Markdown. В нем также рассказывается, как развернуть приложение через Netlify.

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

    • Gridsome

    • Vue

    • GraphQL

    • Markdown

    • Netlify

    Это, конечно, не самый полный туториал, но он охватывает основные понятия Gridsome и Markdown и может стать хорошей отправной точкой.

    Аудио плеер, похожий на SoundCloud, с помощью Quasar

    Quasar — это еще один фреймворк Vue, который можно использовать для создания мобильных приложений. В этом проекте вы создадите приложение аудио-плеера, например:

    Что вы узнаете

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

    У вас уже должна быть работающая Cordova с настроенной Android Studio/Xcode. Если нет, то в руководстве есть ссылка на веб-сайт Quasar, где они показывают, как все настроить.

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

    • Quasar

    • Vue

    • Cordova

    • WaveSurfer

    • UI Компоненты

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

    Современные архитектуры фронт-энда / Хабр

    В статье «Contemporary Front-end Architectures» рассмотрены архитектуры фронт-энда с точки зрения потоков данных в исторической ретроспективе.

    Материал состоит из трех частей

    1. Теория и история

    2. Реализация

    3. Перспективы

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

    Мерой качества того или иного архитектурного решения является легкость, с которой вы можете аргументировать это обоснование!

    Изучение потоков данных и, в конечном счете, архитектур в современных веб-приложениях — цель данной статьи. Веб-приложения превратились из простых статичных веб-сайтов (двухуровневая архитектура) в сложные многослойные SPA и SSR системы с доступом к информации по API. Системы CMS превратились в системы без визуально-презентационного уровня.

    Сообщество фронт-энда изменилось быстро в последнее время. Все началось с методов, воздействующих на DOM, представленных jQuery, которая быстро сменилась Backbone.js на основе MVC. И мгновенно мы оказались в джунглях архитектуры двунаправленных и однонаправленных потоков данных. Где-то мы потеряли след того, как мы сюда попали. Как мир, залитый в MVC, внезапно попал в однонаправленный поток данных React? Какая корреляция? По мере продвижения мы попытаемся разгадать эту головоломку.

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

    Необходимая прелюдия — что такое компьютер?

    Здесь нужна прелюдия. Компьютер — это машина, которая собирает данные/информацию от пользователя и передает ее пользователю после ее обработки, мгновенно или с задержкой. Как компьютер собирает и показывает эти данные? Для этого используется программное приложение.

    Задача архитектуры программного обеспечения заключается в предоставлении разумных средств для создания программного обеспечения без потери здравого смысла.

    Главное, что нужно помнить, это то, что данные, которые обрабатывает программное приложение, известны как Модель (Model) или Состояние приложения (Application state). Некоторые называют это «Моделью предметной области» (Domain model) или «Бизнес-логикой» (Business logic) приложения. Приложение может быть настольным или веб-приложением.

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

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

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

    Если существует первый принцип разработки программного обеспечения, то это наверняка принцип SoC (Separation of Concern) — разделения ответственностей. И, вероятно, паттерн MVC является его первой манифестацией.

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

    • Этот MVC был предназначен только для настольных приложений. Веб еще не родился. Мы говорим о десятилетии до этого.

    • Забудьте о Web. Сложных операционных систем с графическим интерфейсом не существует.

    • Это означает, что прикладное программное обеспечение было очень близко «железу» систем.

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

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

    Сегодня в React, Vue или Angular эта View-Controller пара концептуально совпадает с компонентом, хотя точная механика отличается в зависимости от состояния обработки.

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

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

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

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

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

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

    Двигаемся к Модели приложения (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.

    В общем, введение Модели приложения отодвигает конкретное состояние Представления от доменной области и помогает упростить объекты Представления за счет уменьшения их сложности. Это очень похоже на Модели представления (Presentation Model), концепцию, придуманную Мартином Фаулером в его оригинальном исследовании.

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

    Эпоха современной архитектуры настольных систем

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

    Контроллерам больше не нужно было слушать устройства ввода. Идея Представления (View) объекта изменилась.

    Большая часть функциональности Контроллера была взята на себя операционной системой. Идея View трансформировалась. Раньше это был единственный виджет. Теперь это была композиция виджетов. Представление могло содержать другое представление. Представление стало двунаправленным в том смысле, что оно реагировало на действия пользователя, а также отображало данные модели.

    Идея View в мире фронт-энда очень похожа на эту идею View. В контексте Интернета Представление — это целая страница.

    Классический MVC становился устаревшим и неудобным в использовании. Чтобы приспособиться к этим изменяющимся средам, команда Dolphin искала новую модель создания пользовательских интерфейсов. Это был 1995 год. История того, как команда Dolphin достигла нового дизайна, очень хорошо задокументирована здесь и здесь. Мы не будем останавливаться на этом.

    В итоге, команда проделала поворот модели MVC на 60 градусов, которую они назвали «Скручивание триады» (Twisting the triad). Так мы получили MVP.

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

    1. Презентер (Presenter) следит за логикой Представления. Презентер может изменить Представление напрямую. Представление делегирует пользовательские события Презентеру.

    2. В зависимости от реализации, Представление подписывается на Модель и полагается на Презентер для сложной логики, или Представление просто полагается на Презентер для всего.

    Как отмечалось в его работах по архитектуре графического интерфейса, Мартин Фаулер разделил реализацию MVP на Supervising Controller MVP и Passive View MVP. Различия и потоки данных поясняются на диаграмме.

    MVVM — Model View ViewModel

    MVP великолепен, и для него есть много возможных вариантов и сложных деталей, но с точки зрения фронт-энда MVVM действительно выделяется. В некоторых реализациях он также известен как Model-View-Binder. MVVM очень похож на Passive View MVP, но с добавленной особенностью привязки данных (data binding). Это техника программирования, которая связывает данные поставщика и потребителя вместе и синхронизирует их. Она избавляет от большого количества стандартного кода, который нам традиционно необходим для синхронизации View и Model. Это позволяет работать на гораздо более высоком уровне абстракции.

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

    1. ViewModel — это объект, который предоставляет связываемые (bind-able) свойства и методы, которые используются View.

    2. MVVM имеет дополнительный элемент Binder, который отвечает за синхронизацию View с ViewModel. Каждый раз, когда свойство ViewModel изменяется, Представление автоматически обновляется, чтобы отразить изменения в пользовательском интерфейсе.

    Data binding, присущая MVVM, стала основой многих интерфейсных библиотек, включая Knockout, Angular, Vue.js, React и другие.

    Мы еще раз вернемся к привязке данных в разделе веб-приложения.

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

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

    Основная путаница в сообществе заключается в том, что настольные MVC и web-MVC — это две разные модели. Если бы web-MVC был бы назван как-то иначе, все было бы намного проще.

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

    При построении архитектуры крупных масштабируемых веб-приложений основная задача состоит в определении, где должна выполняться каждая часть кода. На двух концах у нас расположены серверные приложения и насыщенные клиентские (rich client-driven) приложения. Между ними мы можем варьировать бесконечным числом способов.

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

    1. Между кодом на стороне клиента (JS + HTML) и кодом на стороне сервера.

    2. Между пользовательским и серверным кодом.

    3. Между пользовательским и клиентским кодом.

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

    Серверная MVC a.k.a. Модель 2

    Первой известной реализацией серверной MVC является Модель 2 от Sun Microsystems для веб-приложений на Java.

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

    • Десктопный MVC имеет два цикла данных (Data cycles), а веб-MVC — три цикла данных.

    • Есть два цикла Представления (View cycles). Первый — это цикл Представления клиента, такой как событие прокрутки, ввод с клавиатуры и т.д. Второй — цикл Представления сервера, такой как обновление страницы, активация гиперссылки и т.д.

    • Наконец, у нас есть цикл модели (Model cycle), который имеет дополнительную сложность по времени, поскольку он пересекает границу клиент-сервер.

    • Front Controller: компонент, обычно предоставляемый базовым технологическим стеком для обработки отправки HTTP-запросов. Например, контейнер сервлетов в веб-приложениях Java, IHttpHandler в классе ASP.NET или HTTP.Server в Node.js.

    Считается, что сегодня SSR (Server Side Rendering) — рендеринг на стороне сервера означает совершенно другую концепцию. Однако это не совсем так. Поскольку весь HTML/контент создается сервером, а клиентский код JavaScript не используется, веб-приложения, полностью созданные с использованием серверной MVC, все еще рассматриваются как SSR.

    Выходим за пределы серверной части

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

    Мир серверной MVC, генерирующей HTML + JavaScript. Код JS разбросан по страницам. JavaScript в основном используется для улучшения UX за счет сокращения циклов просмотра сервера (Server View Cycles). Такие вещи, как отправка формы, проверка ввода и т.д. обрабатываются клиентским кодом.

    Это самая распространенная архитектура в истории веб-приложений. Большинство приложений B2C, SEO-дружественных веб-сайтов, особенно созданных с помощью CMS — Content Management Systems, используют его. Количество клиентского кода зависит от потребностей приложения.

    Эта архитектура как таковая никогда не была действительно стандартизирована и поэтому не имеет названия. Она развивалась инкрементном стиле и до сих пор считается расширением Web MVC. ASP.NET MVC, Java Struts, Python Django, Ruby ROR, PHP CodeIgniter — некоторые из широко используемых сред, широко использующих серверную MVC или Web MVC.

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

    RIA — архитектура насыщенных интернет-приложений (Rich Internet Application Architecture)

    Учитывая всё вышесказанное, мы теперь готовы обсудить современные архитектуры фронт-эндов. Современные фронт-энд архитектуры крутятся вокруг создания RIA — Rich Internet Application. Точное определение RIA невозможно, поскольку оно означает разные вещи. Но в целом RIA или Rich Web Applications — это категория приложений, в которых приложение сильно зависит от кода на стороне клиента, а их UX очень близок к приложению для настольных компьютеров. Они в основном создаются с использованием фреймворков, поддерживающих SPA (Single Page Application) — одностраничное приложение. Поток данных цикла просмотра сервера из Web MVC не существует. Обычно существует только одна исходная HTML-страница, а затем для визуализации последующих страниц используются код на стороне клиента и системы маршрутизации.

    Построение RIA — сложная операция, которая возникла в результате изучения предыдущих архитектур графического интерфейса для настольных компьютеров. ViewModel, Observers, Components и т.п. являются примерами понятий, которые заимствованы из этих архитектур. Oliver Steel, в своем посте 15-летней давности (поверьте мне, это превосходная статья) разработал хорошую справочную архитектуру для понимания потоков данных RIA.

    Наиболее заметным отличием справочной архитектуры RIA от Web MVC является отсутствие Controller и View в архитектуре верхнего уровня. Однако они не ушли в буквальном смысле. Если мы посмотрим под поверхность, то Controller и View все еще присутствуют, но утончаются, их роли значительно уменьшаются. Бэк-энд реализуется, в основном, как API-сервис. Работа Представления сводится к созданию JSON, а Контроллер отвечает за принятие входящих запросов и их распределение соответствующим бизнес-процессам.

    Шаблоны GUI сложны?

    Если вы подробно изучили предыдущие шаблоны (Patterns), то поймете, что шаблоны GUI отличаются от других шаблонов разработки программного обеспечения. Возьмем, например, элементы многоразового объектно-ориентированного программного обеспечения (Elements of Reusable Object-Oriented Software). Большинство шаблонов не зависят от технологии или языка программирования. Однако то же самое не относится к шаблонам GUI.

    Шаблоны GUI используются на границе HCI (Human Computer Interaction) — взаимодействие человека с компьютером. Пользователь (User) и побочный эффект (Side Effect) являются неотъемлемой частью шаблона.

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

    Большинство шаблонов веб-интерфейса можно разделить на три этапа: эволюционный, революционный и современный.

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

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

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

    Конец первой части
    Часть 2

    20 лучших фронтенд-инструментов для веб-разработки в 2020 году

    • Home

    • Testing

        • Back
        • Agile Testing
        • BugZilla
        • Cucumber
        • Database Testing
        • JTL Testing
          • Назад
          • JUnit
          • LoadRunner
          • Ручное тестирование
          • Мобильное тестирование
          • Mantis
          • Почтальон
          • QTP
          • Назад
          • Центр качества
          • 000300030003 SoapUI
          • Управление тестированием
          • TestLink

      • SAP

          • Назад
          • A BAP
          • APO
          • Начинающий
          • Basis
          • BODS
          • BI
          • BPC
          • CO
          • Назад
          • CRM
          • Crystal Reports
          • Crystal Reports
          • FICO
          • Заработная плата
          • Назад
          • PI / PO
          • PP
          • SD
          • SAPUI5
          • Безопасность
          • Менеджер решений
          • Successfactors
          • SAP Tutorials

          4

        • Web
        • Apache
        • AngularJS
        • ASP.Net
        • C
        • C #
        • C ++
        • CodeIgniter
        • СУБД
        • JavaScript
        • Назад
        • Java
        • JSP
        • Kotlin
        • Linux
        • Linux
        • Kotlin
        • Linux

          • js

        • Perl
        • Назад
        • PHP
        • PL / SQL
        • PostgreSQL
        • Python
        • ReactJS
        • Ruby & Rails
        • Scala
        • SQL

          • 000

        • SQL

          • 000

          0003 SQL

          000

          0003 SQL

          000

        • UML
        • VB.Net
        • VBScript
        • Веб-службы
        • WPF

    • Обязательно учите!

        • Назад
        • Бухгалтерский учет
        • Алгоритмы
        • Android
        • Блокчейн
        • Бизнес-аналитик
        • Создание веб-сайта
        • CCNA
        • Облачные вычисления
        • COBOL 9000

          0

          • 27

            9002 9004

            • COBOL 9000 Design4

                Интерфейсный веб-разработчик — Изучите веб-разработку

                Добро пожаловать на наш курс обучения интерфейсному веб-разработчику!

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

                Охваченные темы

                Охватываемые темы:

                • Базовая настройка и обучение работе с
                • Веб-стандарты и передовые методы (такие как доступность и кросс-браузерная совместимость)
                • HTML, язык, который определяет структуру и смысл веб-контента.
                • CSS, язык, используемый для стилизации веб-страниц
                • JavaScript, язык сценариев, используемый для создания динамических функций в Интернете
                • Инструменты, которые используются для облегчения современной клиентской веб-разработки.

                Вы можете работать с разделами по порядку, но каждый из них также является автономным. Например, если вы уже знаете HTML, вы можете сразу перейти к разделу CSS.

                Предварительные требования

                Чтобы начать этот курс, вам не нужны какие-либо предварительные знания. Все, что вам нужно, это компьютер, на котором можно запускать современные веб-браузеры, подключение к Интернету и желание учиться.

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

                Получение помощи

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

                Не паникуйте. Мы все застреваем, будь мы новички или профессиональные веб-разработчики. В статье «Изучение и получение справки» вы найдете ряд советов по поиску информации и помощи себе. Если вы все еще застряли, не стесняйтесь задать вопрос на нашем форуме Discourse.

                Приступим. Удачи!

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

                Начало работы

                Срок выполнения: 1,5–2 часа

                Предварительные требования

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

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

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

                Направляющие

                Семантика и структура с HTML

                Срок выполнения: 35–50 часов

                Предварительные требования

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

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

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

                Модули

                Стили и макет с CSS

                Время выполнения: 90–120 часов

                Предварительные требования

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

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

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

                Модули
                Дополнительные ресурсы

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

                Срок выполнения: 135–185 часов

                Предварительные требования

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

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

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

                Модули

                Веб-формы — Работа с пользовательскими данными

                Срок выполнения: 40–50 часов

                Предварительные требования

                Формы

                требуют знания HTML, CSS и JavaScript.Учитывая сложность работы с формами, это отдельная тема.

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

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

                Модули

                Заставить Интернет работать для всех

                Время выполнения: 60–75 часов

                Предварительные требования

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

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

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

                Модули

                Современный инструмент

                Время выполнения: 55–90 часов

                Предварительные требования

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

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

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

                Модули

                .

                Front End vs. Back End разработка

                Front End разработка и Back End разработка отвечает за Интернет, с которым вы взаимодействуете — весь день, каждый день. Front End разработка использует языки программирования front end для создания того, что пользователь видит в браузере; Внутренняя разработка использует языки программирования серверной части для выполнения этих запросов на стороне сервера. В совокупности это создает беспроблемный опыт для пользователя.

                Погружаясь глубже, эта страница была создана с использованием трех языков интерфейса.Слова, которые вы читаете, представлены в формате HTML. Расстояние и цвета определяются CSS. Интерактивная графика является результатом JavaScript. Языки серверной части, работающие в фоновом режиме, включают Ruby, Python и PHP.

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

                Это много для обработки — мы знаем. Вот почему мы здесь, чтобы устранить путаницу относительно Front End разработки и Back End разработки, а также о том, что значит быть разработчиком в одной из этих дисциплин.Это означает охват языков программирования полного стека и навыков, необходимых для Front End или Back End разработчика. Мы также рассмотрим новейшие тенденции в области веб-разработки и трудоустройства для Front End и Back End разработчиков, в том числе возможности заработной платы и трудоустройства. Мы также рассмотрим появление технологии Full Stack Development. Это очень важно, но мы готовы помочь.

                Итак, что такое Front End и Back End?

                Что такое Front End разработка?

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

                • HTML, CSS и JavaScript — это три языка Front End

                • Каждый язык имеет определенную функцию

                Проще говоря : Front End веб-разработчик создает визуальные эффекты — визуальное представление запроса пользователя в браузере, потребность в котором возникла в середине 1990-х годов с развитием коммерциализированного Интернета, который мы знаем сегодня.

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

                Вскоре Front End разработка будет процветать с появлением JavaScript в 1995 году и Flash в 1996 году. К 1998 году были созданы каскадные таблицы стилей (CSS), и все инструменты, которые потребуются Front End разработчику, теперь доступны для создания современных сайтов.

                За последние 20 лет то, что было началом разработки Front End, вышло далеко за рамки HTML, JavaScript и CSS. Популярность Flash-разработки снизилась в пользу HTML5. Хотя JavaScript привнес интерактивность в Интернет, разработчики разработали фреймворки для оптимизации этого процесса.Фреймворки JavaScript, такие как React, теперь используются для быстрой и эффективной разработки пользовательских интерфейсов. Redux — еще одна среда JavaScript, обычно используемая с React или Angular, которая позволяет разработчикам создавать предсказуемые и легко тестируемые приложения. Есть еще больше фреймворков JavaScript, которые устраняют избыточные задачи кодирования.

                Ключевые выводы → Языки Front End разработки и программирования Front End привели к созданию динамичного и интерактивного Интернета, который мы используем ежедневно. Front End-разработка сочетает в себе три языка программирования, фреймворки JavaScript и навыки проектирования для создания веб-сайта на основе определенного набора потребностей.

                Что такое Front End разработчик?

                • Помогает создать взаимодействие с пользователем в браузере

                • Требуются творческие, технические и коммуникативные навыки

                • Прогнозы занятости и заработной платы многообещающие

                Front End разработчик (разработчик) работает с дизайнерами и обратно Конец разработчикам для создания веб-сайта. Разработчики Front End используют языки программирования и фреймворки, чтобы создавать то, что пользователь испытывает в браузере.

                Все, что делает Front End-разработчик, обеспечивает удобство использования.Все аккуратные расцветки или бесшовная загрузка страниц — это результат разработки Front End. Хотя разработчик может заботиться о внешнем виде сайта, его работа в первую очередь связана с производительностью. Разработчики Front End должны быть творческими и техническими, потому что они работают как с веб-дизайнерами, так и с разработчиками Back End.

                TL; DR: Что такое фронтенд-разработчик? Front End-разработчик использует HTML, CSS и JavaScript для создания того, что пользователь испытывает в браузере.

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

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

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

                Front End Dev должны обладать как техническими, так и творческими навыками в рамках своей повседневной работы. Им нужно обладать воображением, чтобы понять, как будет выглядеть веб-сайт, и при этом иметь техническую возможность воплотить мечту в реальность. Это также должно происходить полностью незаметно и интуитивно понятно для пользователя. Разработчикам также необходимо учитывать скорость отклика сайта, поскольку мир становится все более мобильным.Медленный или плохой опыт будет наказан как Google, так и пользователями.

                Помимо жестких навыков, Front End разработчикам необходимы мягкие навыки для общения между несколькими командами. Это означает, что нужно научиться сообщать о потребностях дизайнерам, разработчикам серверной части и членам команды, которые могут не иметь особых технических знаний. Одно дело писать код, а совсем другое — объяснять кодирование.

                В связи с растущим спросом на цифровые технологии фронтенд-разработчики пользуются большим спросом. Количество вакансий веб-разработчиков, включая разработчиков Front End и Back End, по прогнозам США вырастет на 15% в период с 2016 по 2026 год.S. Бюро статистики труда Министерства труда.

                Хотя медианные зарплаты могут сильно различаться, даже самые консервативные оценки для Front End-разработчика намного выше, чем медианная зарплата для всех профессий. По данным Бюро статистики труда, средняя зарплата веб-разработчика составляет 67 990 долларов по сравнению со средней зарплатой в 37 690 долларов для всех профессий.

                Средняя зарплата Front End разработчиков выше на таких сайтах, как Glassdoor и Indeed. В Glassdoor средняя годовая зарплата фронтенд-разработчика составляет 92 783 доллара.Средняя зарплата на Indeed составляет 108 303 доллара в год. Средняя заработная плата младших разработчиков Front End ниже — 60 425 долларов на Indeed и 79 511 долларов на Glassdoor. По данным Glassdoor, старшие разработчики Front End зарабатывают в среднем 120 000 долларов.

                Обратите внимание, что некоторые разработчики Front End могут зарабатывать меньше или больше среднего в зависимости от местоположения и отрасли. Мы рекомендуем просмотреть различные веб-сайты, чтобы получить представление о потенциальной заработной плате с учетом вашего опыта, местоположения и предпочитаемой отрасли.

                Ключевые выводы → Front End dev жизненно важен для работы пользователя в сети.Они работают как часть более крупной команды, чтобы создать то, что пользователь видит и с чем взаимодействует в браузере. Для этого разработчики Front End используют HTML5, CSS, JavaScript, JavaScript-фреймворки и библиотеки кода.

                Языки внешнего интерфейса

                • HTML5, CSS и JavaScript являются основой разработки внешнего интерфейса

                • Языки внешнего интерфейса изменились и улучшились с течением времени

                • Разработчики используют фреймворки и библиотеки кода для повышения эффективности

                • Также известные как языки интерфейса или языки интерфейса

                Способ создания веб-сайтов разработчиками интерфейса значительно изменился за последние 20 лет.Mozilla использует великолепную визуализацию трехслойного торта, чтобы описать, как языки работают вместе. HTML находится внизу, CSS посередине и JavaScript вверху.

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

                Это хорошо, если вам нужен текстовый сайт, но что, если вы хотите изменить цвет фона? Вот тут-то на сцену выходит CSS.CSS — это язык, который определяет, как должна выглядеть страница. Используя CSS, разработчики Front End могут кодировать все стилистические изменения в одном месте, не повторяя эту команду каждый раз, когда вам нужен небольшой стиль на своем сайте. Например, достаточно всего нескольких строк CSS, чтобы все заголовки стали синими.

                JavaScript — это последний слой пирога, который превращает статический веб-сайт в динамичный опыт. Если вы имели удовольствие заниматься серфингом в Интернете в середине 1990-х годов — подумайте о компакт-дисках AOL и коммутируемых соединениях — вы слишком хорошо знаете, какое разочарование приходит с ожиданием загрузки страницы.Если вы хотите сделать что-либо на сайте, вам придется подождать, пока он обновится. К счастью, нам больше не нужно ждать. Спасибо JavaScript за это.

                Теперь разработчики Front End могут манипулировать веб-элементами, не дожидаясь загрузки сайта (представьте, что вы ждете обновления Twitter каждый раз, когда вы обновляете свой канал). Разработчики также используют инфраструктуры Front End для улучшения или упрощения задач JavaScript. Фреймворк AngularJS, например, позволяет разработчикам эффективно создавать одностраничные веб-приложения. jQuery упрощает задачи, а AJAX добавляет в JavaScript XML, язык разметки, чтобы сайты могли обновляться без обновления.

                Из-за широкого распространения эти языки обычно занимают первые места в любом рейтинге популярных языков программирования. По словам разработчиков, опрошенных WP Engine, HTML и JavaScript также являются одними из самых простых для понимания языков. JavaScript считается более гибким, чем HTML, а первый считается разработчиками наиболее креативным языком программирования.

                Ключевые выводы → HTML, CSS и JavaScript лежат в основе разработки Front End.Эти три языка относительно просты в изучении и предлагают большую гибкость и творческий подход. Если вы хотите стать Front End разработчиком, вам необходимо изучить эти три языка и фреймворки JavaScript.

                Что такое Back End разработчик?

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

                TL; DR: A Что такое Back End разработчик? Back End разработчик использует Ruby, Python, PHP, SQL и другие языки программирования Back End для разработки и поддержки логики Back End веб-сайта.

                Back End разработчики могут быть более технически организованными и организованными, но они по-прежнему являются частью более крупной команды. Хотя им нужно знать, как создать логику, которая эффективно извлекает данные для выполнения запроса, им также необходимо сообщить о своих потребностях и потенциальных ограничениях во Front End-разработчика.Они также несут ответственность за поддержание этой логической системы. Разработчики Back End работают с базами данных, серверами, интерфейсом прикладного программирования (API), который создает структуру для взаимодействия компонентов и интеграции всех этих процессов.

                Back End разработчики используют языки программирования Back End, такие как Ruby, Python, PHP, Java, платформу Microsoft .Net, и инструменты управления данными, такие как SQL и MySQL, для удовлетворения запросов пользователей. В предыдущем примере с Amazon запрос пользователя запускает цепочку как видимых, так и невидимых событий.Пользователь вводит поисковый запрос, который затем приводит к тысячам результатов менее чем за секунду. Пользователь испытывает все, что создал Front End-разработчик, одновременно пользуясь преимуществами быстрого поиска информации с использованием логики, созданной Back End-разработчиком. Если пользователь нажимает кнопку, чтобы перейти на новую страницу, или если на веб-сайте есть функция бесконечной прокрутки, Back End Dev отвечает за то, чтобы пользователь попал на нужную страницу.

                Back End-разработчики пользуются большим спросом из-за технического характера роли.Это не так привлекательно, как Front End разработка, но Back End разработка необходима. Средняя годовая зарплата Back End-разработчика составляет 114 255 долларов на Glassdoor и 126 601 доллар на Indeed. Заработная плата может отличаться в зависимости от местоположения, отрасли и опыта.

                Ключевые выводы → Back End разработчик разрабатывает и поддерживает серверную логику веб-сайта. Они используют несколько языков Back End, включая Ruby, Python и PHP, а также инструменты управления базами данных, такие как SQL и .Net.

                Back End языков

                • Ruby, Python и PHP являются популярными языками Back End

                • Языки Back End используются для выполнения запросов, созданных пользователем

                • Языки Back End извлекают информацию из базы данных, хранящейся в сервер, который затем обрабатывается с помощью приложения

                • Также известные и серверные языки или серверные языки

                Передняя часть нуждается в серверной части, иначе это будут строки неактивного кода.Языки переднего плана передают запросы на языки внутреннего интерфейса. У каждого веб-сайта есть сервер, база данных и другие приложения, которые взаимодействуют с Front End через код, созданный Back End разработчиком.

                Amazon — хороший пример разработки серверной части в действии. Вы заходите на Amazon и ищете новую рубашку. Back End разработчик использует серверный язык для извлечения всей информации о рубашках из базы данных. Затем эта информация обрабатывается в приложении и возвращается пользователю через интерфейсный язык.На английском языке: вы получите результаты для тысяч рубашек. Если вы отфильтруете результаты по размеру, процесс повторится.

                Ruby, Python и PHP входят в тройку самых популярных языков Back End. Помимо языков управления базами данных, таких как SQL, существуют и другие серверные языки. Хотя легко предположить, что языки серверной части сложнее выучить из-за их технической природы, это не так.

                Ruby — это объектно-ориентированный язык программирования общего назначения.Это означает, что он широко используется и рассматривает все как объект. Философия Ruby, которая подчеркивает человечность и способствует выразительности, сделала его невероятно популярным среди разработчиков и стартапов. Ruby on Rails — невероятно популярный фреймворк, используемый для помощи в разработке веб-сайтов и приложений за счет оптимизации процесса разработки. Ави Фломбаум, наш соучредитель и декан, много писал о Ruby и о том, почему ему нравится этот язык программирования.

                В то время как веб-разработка Back End является более технической, чем разработка Front End, разработчики Back End работают рука об руку с разработчиками Front End.

                Python — еще один объектно-ориентированный язык программирования общего назначения. Python используется для кодирования серверной логики, и многие популярные веб-сайты, включая Reddit и Instagram, построены на Python. Язык легко масштабируется с помощью таких фреймворков, как Django. Python становится все более популярным благодаря своим приложениям в машинном обучении и науке о данных.

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

                SQL, или язык структурированных запросов, используется для управления данными, найденными в базе данных. MySQL — это система управления данными с открытым исходным кодом, которая широко используется в серверной разработке. Существуют и другие серверные языки, такие как Java или ASP.NET, которые используются в различных отраслях.

                Ключевые выводы → Back End языков и Back End разработки используются для выполнения запросов, сделанных языками Front End. Они взаимодействуют с базами данных, серверами и приложениями и также известны как серверные языки.

                Фронтенд и бэкэнд

                Front End и Back End можно резюмировать по-разному. Они используют разные языки программирования и имеют разные обязанности. Но разработчики Front End и Back End стремятся к одной цели. В конечном итоге они работают вместе, чтобы удовлетворить потребности пользователя.

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

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

                Key takeaway → Front End и Back End — две стороны одной медали.Они работают вместе, чтобы выполнить запрос пользователя и удовлетворить более крупные потребности компании.

                Что такое полный стек?

                Что происходит, когда компания слишком мала или не может позволить себе команду разработчиков? Вот где может пригодиться разработчик Full Stack. Они не обязательно являются экспертами как во Front End, так и в Back End, но более чем способны решить большинство потребностей веб-разработки.

                • Разработка Full Stack охватывает весь спектр веб-разработки

                • Разработчики Full Stack не являются экспертами как в Front End, так и в Back End разработке

                • Стартапы и небольшие компании популяризировали роль

                апокрифическая история о том, что Facebook нанимал только разработчиков Full Stack.Было ли это правдой, причиной такого решения было нанять более универсальных разработчиков, которые не были исключительно «Front End» или «Back End». У вас могла бы быть команда разработчиков, которая могла бы справиться со всем спектром веб-разработки и знать потребности других членов команды. Связь будет улучшена

                .

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

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

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

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

                Основная задача разработчика интерфейса — создать удобный интерфейс, отвечающий потребностям пользователя.Для этого вам необходимо понять и определить стремления, цели, модели поведения пользователя и модельные сценарии взаимодействия с пользователем. Чем больше вы владеете межотраслевыми областями (аналитика, психология, маркетинг, взаимодействие с пользователем), тем лучшие решения вы сможете создавать.

                Работа разработчика пользовательского интерфейса

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

                Что касается вспомогательных инструментов, разработчик пользовательского интерфейса может также использовать Microsoft Expression Design и Expression Blend. И последнее, но не менее важное: разработчик должен глубоко погрузиться в рекомендации по пользовательскому интерфейсу для соответствующих операционных систем, под которые он хочет настроить свой интерфейс (рекомендации по пользовательскому интерфейсу Windows, рекомендации по Mac OS). Таким образом, не будет необходимости изобретать велосипед там, где уже существуют проверенные правила, которые можно и нельзя.

                Важнейшая черта разработчика пользовательского интерфейса — логическое мышление, поэтому такие люди никогда не бывают чистыми художниками. Дизайнер пользовательского интерфейса — 100% технарь, обладающий только гуманитарными навыками. Математический подход необходим для объединения стандартных инструментов для решения задач проекта. Что касается высоко ценимого творчества — оно разрешено только тогда, когда стандартные инструменты не могут обеспечить удовлетворительное решение.

                Разработчик пользовательского интерфейса имеет в виду четкий набор приоритетов.

                1. Во-первых, должен работать интерфейс .
                2. Во-вторых, должен быть удобен постольку, чтобы не раздражать пользователя при частой работе.
                3. И наконец, должно быть красивым , если под красотой мы понимаем привлекательность для глаз.

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

                А как насчет Front-End разработчиков?

                Front-End — это разработка клиентской части веб-интерфейса. Front-End разработчик отвечает за запуск и работу интерфейса, а не за внешний вид, разработанный специалистом по пользовательскому интерфейсу.

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

                Специалист по Front-End должен обладать гораздо большими навыками программирования, чем дизайнер пользовательского интерфейса. Они должны понимать протокол HTTP, принципы работы серверов и браузеров, особенности отображения сети на различных устройствах, которые сейчас представлены на рынке.

                Проблема, связанная с разработкой внешнего интерфейса, заключается в том, что инструменты и методы, используемые для создания внешнего интерфейса веб-сайта, постоянно меняются, поэтому разработчик должен постоянно быть в курсе того, как развивается эта область.Сегодня существует три столпа, на которых обычно строится интерфейс. Это HTML, CSS и JavaScript. Как программист, Front-End разработчик также должен иметь образование в области алгоритмов, структурирования данных, шаблонов кодирования, объектно-ориентированного программирования и функционального подхода.

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

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

                Подробнее о советах и ​​приемах веб-разработки:

                1. Как веб-разработчики проводят тестирование удобства использования
                2. Как веб-разработчики проверяют свой код
                3. Что нужно, чтобы собрать идеальную команду веб-разработчиков?

                .