Поднятьбабла. Веб-разработка.
МПривет.
Сегодня первый подробный пост из серии #поднятьбабла. Пойдём по порядку и рассмотрим как стать веб-разработчиком.
Так чем на самом деле занимаются веб-разработчики?
Короткий ответ: они создают и поддерживают веб-сайты.
Но на что конкретно это похоже - во многом зависит от типа выполняемой разработчиком работы. Хорошая новость заключается в том, что веб-разработчики высоко востребованы и, хотя они работают очень усердно, они могут рассчитывать на комфортную оплату труда и здоровое соотношение между работой и жизнью. Это профессия, вознаграждающая людей, которые решают реальные проблемы и получают удовольствие от созидания.
Обязанности веб-разработчика.
Ваша работа, как веб-разработчика, заключается в том, чтобы представлять продукты и сервисы вашего клиента широкой аудитории, создавая привлекательные и функциональные веб-сайты. Скорее всего, от вас будут ожидать, что вы определите потенциальную пользовательскую аудиторию и сможете разработать сайт, привлекательный для этой аудитории. Ваша работа может включать в себя встречи с клиентами для обсуждения их пожеланий к веб-сайту или обсуждения того, как сохранить их сайт функционирующим и актуальным. Вы можете проектировать внешний вид, создав визуально привлекательную главную страницу и дружелюбный к пользователю дизайн. Так же вы можете писать контент для сайта.
После того, как сайт создан и работает, вы должны будете убедиться, что он функционирует во всех браузерах, периодически тестируя и соответственно обновляя. Клиент может так же попросить вас включить интерактивные возможности на свой сайт, используя язык программирования Python или Java.
Где вы работаете.
Веб-разработчики могут работать на большие корпорации, маленькие компании или в качестве фрилансеров. Большинство позиций будут требовать от вас 40 часов занятости в неделю, хотя другие - особенно позиции на фрилансе - дадут насладиться гибким графиком. Иногда вам придется работать в выходные или в не-рабочие часы, чтобы выполнять обслуживание сайта или в экстренных случаях.
Другие навыки.
Вам потребуется хорошее знание технологии и понимание того, как работают компьютеры и веб-серверы. Так же вам необходимо быть хорошо знакомым со множеством софтверных языков, веб-приложений и языков веб-программирования, таких как гипертекстовый язык разметки (HTML), Ruby on Rails и C++. Поскольку это очень клиенто-ориентированная и проекто-ориентированная сфера деятельности, вам будет необходимо эффективно общаться, устанавливать цели и дедлайны. Так же вам придется иметь представление о принципах дизайна.
Выносим ключевые моменты:
Разработчики часто работают на клиентов, которые хотят представить свой продукт или услугу в сети.
Работа обычно сильно сфокусирована на проекте и включает в себя сотрудничество с командой людей, которые помогают сопоставлять требования клиента с конечным продуктом.
Не все разработчики работают на внешних клиентов... "Клиент" может быть компанией, где вы работаете, организацией, государственным учреждением, которому нужен веб-сайт или веб-приложение.
Это довольно весело, вы реально создаете вещи, которые используются людьми, и вы можете играть со множеством новых игрушек. Как это можно не любить?
Важные различия.
"Фронтенд" против "Бэкенд" разработчиков
Фронтенд:
"Фронтенд" обычно означает те вещи, которые вы непосредственно видите на сайте в браузере. Это показывает то, как представлено содержимое, включая все мелкие элементы пользовательского интерфейса вроде меню, выпадающих меню, красивых анимаций и модальных окон.
Фронтенд-разработчики часто фокусируются на понимании HTML, CSS и Javascript, поскольку эти языки работают в браузере. Они не обязательно фокусируются на том, чтобы делать вещи "красивыми" (что зачастую оставляют дизайнерам), но скорее на том, чтобы информация была представлена эффективно и пользовательское взаимодействие с веб-страницей было настолько комфортным, насколько это возможно. Сегодня мы выполняем все больше и больше кода непосредственно в браузере.
Бэкенд:
"Бэкенд", как правило, обозначает ту часть приложения, которая живет на сервере. Бэкенд больше сосредоточен на том, чтобы все необходимые данные корректно отправлялись в браузер. Эта часть айсберга скрывается под поверхностью... множество вещей должно работать правильно, чтобы передать данные на фронтенд, где они смогут быть корректно отображены. Основные языки бэкенда - php, JavaScript, C++, Java, Python.
Google может быть довольно простым поисковиком с нашей точки зрения, но они нанимают армию инженеров, чтобы шестеренка, которую вы не видите, работала правильно.
Фуллстак (full stack):
"Фуллстак"-разработчики работают одновременно с обеими сторонами. Хотя каждый из "енд"-ов включает в себя изучение большого количества информации, фуллстак разработчики могут с комфортом "общаться" одновременно с базой данных и с браузером. В наши дни довольно популярно искать разработчиков с большим опытом работы с обеими частями веб-приложения (и это как раз то, чему мы здесь учим).
Веб-разработчик против веб-дизайнера.
Итак, если у нас есть бэкенд-разработчики и фронтенд-разработчики, то кто же делает веб-сайт действительно красивым? Кто объединяет изображения, логотипы и цветовые схемы? Это работа веб-дизайнера. Хотя исторически сложилось, что они были менее вовлечены в непосредственное программирование страниц, в настоящий момент даже от дизайнеров ожидают, что они смогут в нужный момент закатать рукава и написать немного кода. Некоторые из лучших веб-разработчиков пришли из сферы дизайна.
Так как же стать веб-разработчиком?
Веб-разработка — одно из самых простых и оттого популярных направлений среди начинающих программистов. Для работы достаточно любого текстового редактора и браузера, не нужно изучать алгоритмы на продвинутом уровне, результат каждого этапа написания программы нагляден — в общем, преимуществ много. Ключевым навыком в контексте веб-разработки считается знание JavaScript.
Сейчас JavaScript очень быстро развивается, а потому при изучении языка легко запутаться. Мы предлагаем вашему вниманию учебный план с удобной структурой, который охватывает все необходимые аспекты JavaScript и смежных технологий.
Почему JavaScript?
Стоит отметить открытость языка — компании, обычно соперничающие друг с другом, сотрудничают с целью развития JavaScript. Язык очень гибок и подойдёт сторонникам как объектно-ориентированного, так и функционального подхода. Огромное количество библиотек и фреймворков позволяет с лёгкостью решать любые типы задач, а серверная платформа Node.js даёт возможность использовать язык не только в браузере, но и в консоли. Вы даже можете писать настольные и мобильные приложения: первые — при помощи фреймворка Electron, а вторые — на NativeScript или React Native.
Основы
Сперва необходимо изучить основные понятия JavaScript, веб-разработки и программирования в целом:
объектно-ориентированный JS — конструкторы и фабрики, наследование;
функциональный JS — функции высшего порядка, замыкания, рекурсия;
спецификации тестов Jasmine;
основы HTML, CSS и jQuery.
Git
Git — необходимый разработчикам инструмент, поэтому познакомиться с ним нужно как можно раньше. Вот основные навыки, которыми вы должны обладать:
создание и перемещение файлов в каталогах;
инициализация и коммиты в Git;
настройка репозиториев в GitHub.
Алгоритмы и структуры данных
Затем стоит изучить алгоритмы (в частности, понятие сложности алгоритмов), а также базовые структуры данных: связные списки, очереди, стеки, двоичные деревья поиска и хэш-таблицы. В этом вам поможет наша серия статей.
Бэкенд.
Node.js
10 лет назад JavaScript можно было использовать только для фронтенд-разработки. Теперь благодаря Node.js одним «фронтом» дело не ограничивается. Node — это просто среда для выполнения JS-кода на стороне сервера, поэтому вам не придётся изучать новый синтаксис, но понадобится импортировать и экспортировать файлы, разбивать код на модули и использовать менеджер пакетов npm.
Серверы, HTTP, Express.js
После изучения Node стоит продолжить знакомство с бэкенд-разработкой и разобраться в серверах и маршрутизации. Можно начать с портов и протоколов с акцентом на HTTP, а потом заняться Express — Node-библиотекой для обработки запросов.
Асинхронный JavaScript
Асинхронность является одной из отличительных фич JavaScript, хотя и создаёт некий раскол среди разработчиков: некоторые её любят, а некоторые — ненавидят. Вам стоит понимать плюсы и минусы этой технологии. Начните со стека вызовов, цикла событий и коллбеков, а затем перейдите к изучению промисов.
Базы данных, схемы, модели и ORM
Базы данных — один из важнейших элементов веб-разработки. Если вашему приложению нужно загружать или хранить какие-либо данные, не теряющиеся при обновлении страницы, придётся использовать БД. Нужно научиться различать реляционные и нереляционные базы данных и разобраться в типах связей. Затем изучить SQL и познакомиться с разными системами управления баз данных. Умение работать с ORM тоже не будет лишним.
Фронтенд
HTML и CSS
HTML и CSS — это основа основ для любого веб-разработчика. Вам не обязательно знать их в совершенстве, но разбираться в них вы должны. Также можно изучить какую-нибудь популярную библиотеку (например, Bootstrap) и CSS-препроцессор вроде Sass — он поможет сделать CSS похожим на обычный код. Для упрощения работы с HTML можно выбрать один из популярных шаблонизаторов, например, pug.
jQuery и манипуляция DOM
Создав внешний облик страницы при помощи HTML и CSS, вы будете использовать трансляторы событий и библиотеку jQuery для управления DOM. Многие считают, что jQuery бесполезна и её скоро заменят Angular и React, но она безумно популярна, и поэтому её стоит знать. Кроме того, однажды вы попадёте в ситуацию, когда забивать гвозди React-микроскопом вам будет неудобно, и тогда на помощь вам придёт лёгкая jQuery.
Инструменты разработчика Chrome
Было бы непростительно обделить вниманием инструменты Chrome, которые дают огромное количество возможностей. С ними вы сможете изучать элементы DOM, производить отладку через консоль, отслеживать маршруты и многое другое. В нашей статье описаны несколько удобных возможностей консоли Chrome, которые упростят выполнение рутинных задач. Можно нажать F12 в браузере и посмотреть, что там есть интересного.
AJAX
Если вы хотите, чтобы приложение не перезагружало страницы после каждой операции с базой данных, вам точно понадобится AJAX — он отправляет фоновые асинхронные HTTP-запросы, ответы на которые обновляют лишь часть отображения. Работать с AJAX можно через jQuery при помощи метода .ajax.
Продвинутые темы
Разработка через тестирование
Test-Driven Development, или TDD — это такая техника разработки, при которой создание ПО разбивается на множество небольших циклов: сначала пишутся тесты, которые покрывают желаемое изменение, затем пишется код, который эти тесты проходит. После этого производится рефакторинг кода, при необходимости пишутся новые тесты. Если какие-то тесты участок кода не проходит, это исправляется.
В случае с JavaScript советуем обратить внимание на фреймворки Jasmine, Chai и Mocha.
Веб-сокеты
Этой теме стоит уделить особое внимание, поскольку веб-сокеты очень полезны. Протокол WebSocket, в отличие от HTTP, позволяет работать с двунаправленным потоком данных, что делает эту технологию уникальной. Самой распространённой реализацией является библиотека socket.io.
ES6, Babel, Webpack
Сейчас основным стандартом является ES6 (ES2015), но уже принят ES2016, а ES2017 находится в разработке, поэтому нужно всегда быть в курсе обновлений и использовать их. Проблемы совместимости решаются всего парой инструментов:
Babel — компилирует ES6-код (скоро появится поддержка ES2016) в ES5, который поддерживается всеми браузерами. Он даже умеет компилировать JSX/React-компоненты, что делает его незаменимым для любого веб-разработчика;
Webpack — собирает все ваши исходные файлы (картинки, шрифты, таблицы стилей, JS-файлы и т.д.) в единый граф зависимостей. Он не пригодится при создании маленьких приложений, но при работе с React его помощь неоценима.
React и Redux
React — библиотека для создания пользовательских интерфейсов. Она была создана компанией Facebook в 2013 году и достаточно быстро стала популярной среди разработчиков. Вам стоит прочитать эти 9 советов, а затем разобрать написание простого приложения, чтобы понять, как работает React и для чего он нужен. React пригодится не только для фронтенд-разработки: Facebook выпустила варианты фреймворка для мобильной (React Native) и VR-разработки (React VR).
Redux — контейнер предсказуемых состояний, обычно используемый в связке с React. Его можно использовать для сокращения кода благодаря модульности. Особенно полезен в многопользовательских приложениях, работающих в режиме реального времени, например, в играх.
Аутентификация, сессии, cookies
Вам также стоит разобраться, как приложения взаимодействуют с пользователями, обрабатывают вход в учётную запись и выход из неё, выдают привилегии. Для отслеживания личности пользователя в течение сессии используются cookies — небольшие текстовые файлы, передаваемые сервером браузеру в ответе на HTTP-запрос. А для обеспечения связи базы данных и страничек авторизации можно использовать библиотеку express-session.
Веб-безопасность
И, наконец, стоит обратить внимание на безопасность. Важно изучить как методы атак, так и способы защиты от них.
На этом про веб-разработчика всё. Если заинтересованы – пишите, я порекомендую конкретные курсы. На всякий случай оговорюсь – ваше мнение может не совпадать с моим. Определения терминов взяты из всяких там ваших интернетов.