Почему Front-end разработка уже неактуальна, а ее сменит инжиниринг


Содержание материала:

Простыми словами о «фронтенде» и «бэкенде»: что это такое и как они взаимодействуют

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

Давайте начнем с определений.

Фронтенд — все, что браузер может читать, выводить на экран и / или запускать. То есть это HTML, CSS и JavaScript.

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

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

«КРОК», Воронеж, Иркутск, Краснодар, Москва, Нижний Новгород, Пермь, Самара, Санкт-Петербург, Троицк, Челябинск, от 120 000 до 240 000 ₽

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

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

Для бэкенда вы можете использовать любые инструменты, доступные на вашем сервере (который, по сути, является просто компьютером, настроенным для ответов на сообщения). Это означает, что вы можете использовать любой универсальный язык программирования: Ruby, PHP, Python, Java, JavaScript / Node, bash. Это также означает, что вы можете использовать системы управления базами данных, такие как MySQL, PostgreSQL, MongoDB, Cassandra, Redis, Memcached.

Структура взаимодействия бэкенда и фронтенда

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

Серверные приложения

В этом случае HTTP-запросы отправляются напрямую на сервер приложения, а сервер отвечает HTML-страницей.

Между получением запроса и ответом сервер обычно ищет по запросу информацию в базе данных и встраивает ее в шаблон (ERB, Blade, EJS, Handlebars).

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

Связь с использованием AJAX

Другой тип архитектуры использует для связи AJAX (Asynchronous JavaScript and XML). Это означает, что JavaScript, загруженный в браузере, отправляет HTTP-запрос (XHR, XML HTTP Request) изнутри страницы и (так сложилось исторически) получает XML-ответ. Сейчас для ответов также можно использовать формат JSON.

Это значит, что у вашего сервера должна быть конечная точка, которая отвечает на запросы JSON- или XML-кодом. Два примера протоколов, используемых для этого — REST и SOAP.

Клиентские (одностраничные) приложения

AJAX позволяет вам загружать данные без обновления страницы. Больше всего это используется в таких фреймворках, как Angular и Ember. После сборки такие приложения отправляются в браузер, и любой последующий рендеринг выполняется на стороне клиента (в браузере).

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

Универсальные/изоморфные приложения

Некоторые библиотеки и фреймворки, например, React и Ember, позволяют вам исполнять приложения как на сервере, так и в клиенте.

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

Вне фронтенда и бэкенда

Автономный фронтенд

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

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

Легкий бэкенд

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

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

Размытые границы

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

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

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

10 навыков, которые нужно освоить, чтобы получить работу front-end разработчика

Если вы хотите сменить свою специальность, чтобы получить новую, более высокооплачиваемую работу, сфера IT и front end подходят для этого как нельзя лучше.

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

Сейчас я хочу сосредоточиться на front-end разработке. Если говорить обобщенно, front-end разработчики пишут сайты, используя HTML , CSS и JavaScript . Они же реализуют готовый дизайн на сайте.

Быстрый обзор текущих вакансий для front-end разработчиков показывает, что существует четкий набор навыков, которые указывают работодатели. Например, списки требований первых трех вакансий для front-end разработчиков, которые я нашел на Glassdoor.com , во многом идентичны: знания HTML , CSS и Javascript , контроль версий, фреймворки.

Это термины, с которыми вы познакомитесь, когда начнете изучать front-end разработку. Ниже приводится список 10 основных навыков, необходимых каждому front-end разработчику.

1. HTML / CSS

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

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

2. JavaScript / jQuery

Еще одним основным инструментом в арсенале начинающего front end разработчика должен стать JavaScript ( JS ). Если HTML — это язык разметки, а CSS — язык стилей, то JS — это язык программирования. Если HTML и CSS определяют представление страницы, JS определяет ее функционал.

Для простых сайтов или веб-страниц достаточно будет HTML/CSS . Но для интерактивных функций ( аудио и видео, игры, прокрутка, анимация страниц ) понадобится JS .

Одна интересная вещь, которую следует знать о JS — это наличие библиотек, таких как jQuery . Библиотеки — это коллекции плагинов и расширений, которые позволяют проще и быстрее использовать JS на сайте.

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

3. CSS и JavaScript-фреймворки

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

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

Чтобы еще больше все упростить, можно использовать фреймворки совместно. Обычно используется пара Bootstrap с другим JavaScript-фреймворком , таким как AngularJS . Содержимое обрабатывает Angular , а внешний вид — Bootstrap ( с некоторым изменениями в CSS ).

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

4. Препроцессинг CSS

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

Используя препроцессоры CSS , такие как Sass , LESS или Stylus , можно писать код на языке препроцессора, доверяя ему делать то, что может занять много времени при использовании CSS . Затем препроцессор преобразует код в CSS , чтобы он работал на сайте.

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

5. Контроль версий / Git

После написания кода HTML , CSS и программирования на JS front end web developer должен будет произвести ревизию проделанной работы. Если что-то пошло не так, последнее, что вам захочется, это начинать все с начала. Контроль версий — это процесс отслеживания и контроля изменений в исходном коде.

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

6. Адаптивный дизайн

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

Адаптивный дизайн является неотъемлемой частью фреймворков CSS , таких как упомянутый выше Bootstrap .

7. Тестирование / отладка

Чтобы заставить все работать надлежащим образом, нужно тестировать код на наличие ошибок. Поэтому навыки тестирования и отладки являются обязательными для front-end разработчиков.

Существует несколько различных методов тестирования. Функциональное тестирование проверяет конкретный функционал сайта ( например, форму или базу данных ).

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

Тестирование — важная часть процесса разработки front end на Java . Но это еще одна область, для которой существуют различные фреймворки, которые помогут вам. Такие программы, как Mocha и Jasmine , предназначены для ускорения и упрощения процесса тестирования.

8. Инструменты браузера для разработчиков

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

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

Консоль JS позволяет просматривать ошибки, возникающие при попытке браузера выполнить JS-код .

9. Инструменты для построения и автоматизации / производительности

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

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

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

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

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

Даже если большая часть работы front end web developer выполняет через графический интерфейс, он может получить серьезное преимущество в глазах потенциального работодателя, если будет владеть навыком работы с командной строкой.

Не останавливайтесь в совершенствовании своих профессиональных навыков!

Данная публикация представляет собой перевод статьи « 10 Skills You Need to Land Your First Front End Developer Job » , подготовленной дружной командой проекта Интернет-технологии.ру

Почему Front-end разработка уже неактуальна, а ее сменит инжиниринг

Front End Loading — (FEL) is the process for conceptual development of processing industry projects. Example of processing industry are petrochemical, refining, pharmaceutical. Front End Loading is also referred to as Pre Project Planning (PPP) or Front End… … Wikipedia

Front-end of line — Die Mikroelektronik ist ein Teilgebiet der Elektrotechnik bzw. der Elektronik, das sich mit der Miniaturisierung von elektronischen Schaltungen befasst … Deutsch Wikipedia

Design methods — is a broad area that focuses on: Divergence – Exploring possibilities and constraints of inherited situations by applying critical thinking through qualitative and quantitative research methods to create new understanding (problem space) toward… … Wikipedia

Design for Six Sigma — (DFSS) is a separate and emerging business process management methodology related to traditional Six Sigma. While the tools and order used in Six Sigma require a process to be in place and functioning, DFSS has the objective of determining the… … Wikipedia

Front and back ends — Front end and back end are generalized terms that refer to the initial and the end stages of a process.[citation needed] The front end is responsible for collecting input in various forms from the user and processing it to conform to a… … Wikipedia

Design management — is the business s >Wikipedia

Design language — A design language or design vocabulary is an overarching scheme or style that gu >Wikipedia

Design Patterns — Not to be confused with the concept of a Design pattern. Design Patterns: Elements of Reusable Object Oriented Software … Wikipedia

Architecture and Civil Engineering — ▪ 2009 Introduction Architecture For Notable Civil Engineering Projects in work or completed in 2008, see Table (Notable Civil Engineering Projects (in work or completed, 2008)). Beijing was the centre of the world of architecture… … Universalium

Structural engineering — is a field of engineering dealing with the analysis and design of structures that support or resist loads. Structural engineering is usually cons >Wikipedia

Product engineering — refers to the process of designing and developing a device, assembly, or system such that it be produced as an item for sale through some production manufacturing process. Product engineering usually entails activity dealing with issues of cost,… … Wikipedia

Топ-пост этого месяца:  HTML и HTML5 – в чем разница

Должен ли фронтенд разработчик уметь писать бэкенды?

Читаю твиттер и удивляюсь тому, какое разделение разработчиков (или раскол?) на западе. Под термином фронтенд там подразумевают исключительно CSS и HTML. Разработчики пытаются себя оградить от не декларативных ЯП и фокусируются больше на дизайне, типографике, доступности и удобстве использования. То есть, там JavaScript это прямо настоящий инжиниринг, это программирование эквивалентное проектированию на С++, ну или что-то около того. Таким программистам чуждо прекрасное и ближе данные и тяжелые вычисления.

В какой-то степени это забавно, потому что сам ты варишься в беларуском аутсорсинге, где под фронтендом, в первую очередь, подразумевают JavaScript, React, Angular, Vue и все такое. HTML и CSS — у нас это называют верстка и к этому, к сожалению, тут вообще серьезно не относятся. Это так, придаток. Каждый должен знать. А вот знает ли на самом деле? Это уже другая история.

На нашем поле боя ведутся другие войны и разделения. Бэкенд против фронтенда! Или фулстек? А верно ли такое разделение? Верна ли в принципе какая-либо классификация разработчиков?

Должен ли разработчик, который идентифицирует себя, как фронтенд инженер, уметь писать бэкенды?

Мне кажется должен. Все эти классификации и идентификации, фулстеки и бэкенды не стоят ничего. Вспомните, кто создал Веб. Сэр Тимоти Джон Бернерс-Ли — вот кто должен быть примером современному фронтенд разработчику, помимо HTML и первого браузера, написанного на Objective-C, он создал и первый сервер — CERN httpd.

Бэкендер? Фронтендер? Программист в первую очередь. Веб не может существовать без серверов.

С другой стороны, сейчас немного и время другое. Профессия “ программист” начинает понемногу обрастать более узкими специализациями и специальностями. Это как у врачей, есть врач общей практики — терапевт, а есть узкие специалисты — оториноларинголог или офтальмолог. Это лучшая аналогия, как по мне…

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

BFF — Backend for Frontend

А такие вообще есть? В одном из подкастов я слышал, что идею BFF — Backend for Frontend первым продал Netflix. Я же впервые о таком концепте узнал из книги Сэма Ньюмена “Создание микросервисов”.

Ниже оригинальная картинка из книги.

В чем суть? Представьте, что у вас многосервисная архитектура, где над каждым сервисом работает отдельная команда, которая поставляет свой API. Разные сервисы имеют разные коммуникационные каналы или протоколы. Кто-то организует все согласно REST с HTTP, a у кого-то SOAP. У кого-то формат ответа в JSON, у кого-то в XML.

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

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

Это как раз случай, где связующее ПО (middleware server) было бы уместно, эдакий фасад или адаптер, если хотите, который разрабатывается для удобства разработки и организации клиентской части. По сути, продолжение фронтенда на серверной стороне.

Причем надо сказать, что это справедливо не только для микросервисной архитектуры, но и для монолита. Между тяжелым бэкендом на Java, который ближе к данным, и клиентом, который ближе к пользователю, может быть тоже промежуточное ПО. Это могли бы быть легковесные бэкенды, написанные на не столь громоздких серверных фреймворках — node.js + express или python + django.

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

Инженерам трудно осознать, чем код на языке С, реализующий взаимодействие с БД, разительно отличается от кода на языке С, реализующего взаимодействие с человеком.

А. Купер “Психбольница в руках пациентов”

Server-S >Серверный рендеринг — еще одна вариация бэкенда, с которой должен быть знаком фронтенд инженер.

Если копнуть историю веба, то становиться очевидным, что серверный рендеринг (Server-Side Rendering) это не есть что-то концептуально новое, подход этот очень старый. Даже можно сказать первый из.


До появления “толстых” клиентов и AJAX, связывание данных и динамическое построение веб-страниц происходило на сервере.

Шаблон готового HTML-документа, который пользователь получает и видит на клиенте, лежал на сервере в виде JSP-страницы, пронизанной скриплетами написанными на Java. То же самое с ASP и C# или CGI и каким-нибудь PHP. Это всё инструменты фронтендера прошлого. Править верстку приходилось в кодовой базе бэкенда. И наоборот, работа с данными осуществлялась прямо там, рядом с декларативным описание веб-документа и его стилями.

Как назвать такого специалиста? Бэкендер, который правит верстку? Или фронтендер, который копается в серверном коде?

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

FEED — стадия проекта

Жизненный цикл любого крупного инвестиционного проекта проходит через несколько последовательных фаз, без которых следующий этап не проводится. После утверждения концептуального видения идеи, отвечающего на вопросы, нужно ли это делать и в каком виде, наступает черед front end engineering design (FEED), т.е. предварительного проектирования, которое подразделяется на pre feed и собственно feed. Остановимся на этом этапе подробнее.

Содержание статьи

Что означают понятия Pre-FEED и FEED в проектировании

Понятие «проект» прочно вошло в жизнь любого современного бизнесмена и служащего. Однако суть понятия «проектирование» до сих пор вызывает множество вопросов, учитывая разные варианты переводов (design, development, engineering, drafting) и различное понимание протекающих процессов.

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

  • возникновение бизнес-идеи;
  • разработка концепции (conceptual design);
  • предпроектное проектирование или изыскания (Pre-FEED, FEED);
  • детальное (рабочее) проектирование (DPD);
  • подготовительные работы;
  • строительно-монтажные работы;
  • пусконаладочные работы;
  • ввод в эксплуатацию объекта.

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

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

В чем состоит суть FEED и как оно проводится

Масштабные инфраструктурные проекты необходимы как государству для модернизации экономики, так и бизнесу для увеличения своей капитализации, сохранения позиций и завоевания новых рынков. Однако, по данным компании McKinsey&Co, более 80% крупных проектов не реализуется в установленные сроки и не укладывается в утвержденный бюджет на 20-100%.

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

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

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

Поскольку эта фаза является краеугольной, то выступающие заказчиками государственные структуры и крупные компании нанимают для подготовки FEED известные организации, специализирующиеся на этом вопросе, или же покупают лицензированную проверенную технологию. Так, например, с целью разработки предпроектной документации для постройки терминала по приему сжиженного природного газа, правительство Польши провело отдельный тендер (сумма около 7,2 млн. долларов) на разработку front-end engineering and design. Победила инжиниринговая компания из Канады, которая провела предварительные испытания и расчеты, а непосредственно строительными работами ценой свыше 930 млн. долларов занимался международный консорциум ведущих нефтегазовых компаний.

Если речь идет о крупном замысле, его особенностью является то, что от 90 до 95% средств осваивается на этапе реализации (детальное расписание всех действий, закупка материалов и оборудования, строительно-монтажные и пусконаладочные работы). При этом, предпосылки для всех затрат (плановых или непредвиденных) закладываются именно на старте, при предварительной подготовке документации, поэтому успешные бизнесмены используют практику «контрольных точек» (вех). После каждой подготовительной фазы проводится анализ и принимается решение о том, продолжать проект или закрыть его, а также выделяется финансирование для следующего этапа.

FEED и проектная документация, в чем сходство и различия

Финальное решение инвестора о вложении средств в практическую реализацию проекта – ключевой момент всего замысла, поэтому оно принимается исключительно после этапа front-end engineering and design. В России и в странах СНГ FEED нередко отождествляют с подготовкой проектной документации (ПД). Однако такое сравнение не совсем корректно, поскольку непосредственно проектная документация является лишь составной частью FEED, отталкиваясь от которой готовится более широкое видение осуществления задумки.

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

В отличие от стандартной российской проектной документации, содержание FEED гораздо шире и включает в себя:

  • Детализированный пошаговый план воплощения идеи в жизнь (полный список необходимых работ с техническими рекомендациями, применяемые стандарты, необходимый для проекта анализ, а также руководства и чертежи). Расчеты основываются на фактах и дают наглядную картину эффективности всех технических решений и инвестиций.
  • Оценку бюджета, точность которой составляет около 80-90%, а уровень отклонения при соблюдении сроков, соответственно, не больше 10-20% от планового показателя.

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

Если более детально говорить о том, что можно оценить на этапе FEED, то можно указать такие направления:

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

Также на этом этапе происходит планирование по принципу, называемому «минимальное техническое решение». Суть его состоит в том, чтобы избежать необоснованных трат при переговорах с подрядчиками, которые часто пытаются «протолкнуть» более дорогостоящее техническое решение в тех случаях, когда необходимого качества работ можно достигнуть с меньшими затратами. Перерасход в таких случаях может составить от 10 до 100% предполагаемой общей сметы. Чтобы этого не допустить, компания, проводящая эскизное проектирование должна тесно сотрудничать с техническим и коммерческим блоками заказчика.

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

  • все показатели рассчитаны по 3 классу точности исходя из методологии AACEI;
  • расчеты проведены по принципу «минимального технического решения»;
  • проработаны все риски (политические, технические, организационные, рыночные и риски реализации) и методы по их локализации;
  • осуществлена независимая экспертиза предварительных решений.

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

Особенности договоров FEED в рамках налогового законодательства РФ

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

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

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

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

Исходя из вышесказанного, можно сделать вывод, что в договорах FEED основной объект реализации – не работа (услуга) сама по себе, а именно ее результат, т.е. объект интеллектуальной собственности.

Frontend — rак все поменялось за последние 15 лет

Все материалы сюжета:

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

В те времена, когда компьютеры были большими, а интернет очень маленьким, никто толком не знал, что же в этом загадочном интернете можно делать. Как ты наверняка помнишь, почти все сайты были очень простые: текст с информацией, пара ссылок на аналогичную страницу и всё. Браузеры тоже были очень простые, а зачастую даже чисто текстовые (например, консольные), поэтому и странички состояли из самых базовых тегов HTML, которые размечали структуру текстового документа. Глядя на все, что происходит сейчас, можно сказать, что именно тогда и был золотой век семантики и теги использовались действительно по прямому назначению. Впрочем, золотое детство интернета быстро прошло, появились первые большие сайты с повышенными требованиями к внешнему виду, а значит, и к верстке.

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

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

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

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

Рождение фронтенда

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

Топ-пост этого месяца:  Инфлюенсеры кто это и как с ними работать, как стать

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

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

Кеширование — это запоминание полученного по конкретному запросу ответа, чтобы в дальнейшем избежать запросов к базе данных и последующей обработки. Кеширование — это не всегда задача фронтенда, часто ее перекладывают на HTTP-сервер, однако совсем избавиться от этой части не получится: все равно никто лучше фронтенда не знает, как именно надо кешировать какие разделы сайта. У тебя может лежать статический файлик, который можно закешировать на год, а рядом будет AJAX’овая ручка, которая выдает актуальный статус системы и которую можно дергать несколько раз в секунду, получая разный ответ. Обрати внимание, что кешировать можно как готовый HTML, так и ответ от бэкенда по каким-то популярным запросам.

Ну и конечно же, огромным толчком для развития фронтенд-разработки стало появление Node.js. Если говорить точнее, то само появление Node.js явилось следствием повышающегося значения JavaScript, о котором мы говорили раньше. Но кого волнуют такие тонкости? Фронтенд-разработчики захотели свой собственный движок на знакомом языке, и они получили его. А вместе с движком они получили кучу возможностей.

Если раньше JavaScript воспринимался всеми как маргинальный язык для браузеров, то теперь появилась возможность запускать его на серверной стороне. Внимательный читатель уже знает, к чему это привело. Конечно же! Работы стало еще больше. Фронтенд-разработчики начали самостоятельно «собирать» свои проекты, то есть приводить их из того вида, в котором удобно разрабатывать, в тот вид, в котором все должно показываться пользователю (минифицировать код, загружаемый на клиент, минимизировать картинки, компилировать шаблоны по необходимости и так далее). Подробнее про сборку проектов расскажем ниже, но важен сам факт — фронтенд-разработчики захотели делать все сами.

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

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

Структура современного фронтенда

Современная клиентская часть может быть устроена очень по-разному, и, как правило, ее вид очень сильно зависит от требований конкретного сайта. В каких-то случаях идеальным вариантом будет single page application с большим количеством динамики на клиенте, в других же нужны лишь отдельные интерактивные элементы в обычной структуре сайта. Так или иначе большая или меньшая интерактивность ложится на клиентскую сторону, общая сложность создания сайта (фронтенд + клиент) обычно одинаковая. Цикл жизни запроса от пользователя обычно состоит из следующих этапов:

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

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

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

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

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

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

В 2020 году в моей жизни произошло много перемен. Я бросил работу графическим дизайнером в марте и начал учиться кодить. Спустя пять месяцев я устроился frontend-разработчиком в Tenten.co.

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

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

Помните, что не существует идеального и универсального пути для всех.

Мой опыт работы

Фото: Medium. Страница на Behance

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

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

Почему я захотел кодить

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

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

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

После просмотра это видео я узнал о силе дизайнерского мышления.

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

Я устал от этой игры. Тогда-то я и решил почитать на Medium статьи на популярную тему frontend-разработки.

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

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

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

Что делать

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

Я поставил перед собой цель и составил список необходимых задач:

1. Цель

2. Как достичь цели

Разработать сайт, чтобы показать свои способности.

3. Задачи

  • Обучиться HTML, CSS, jQuery/JavaScript
  • Разработать сайт для портфолио
  • Подготовиться к разработке сайта

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

  • Sass
  • Gulp
  • CS50
  • основы Unix
  • основы WordPress
  • Jekyll
  • знания AWS
  • базовые знания, как работать с сетью

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

Чтобы следовать своему плану, я поставил цель: работать по 48 часов в неделю. То есть я должен был работать по восемь часов в день, и у меня был всего лишь один выходной. Благодаря Toggl я смог отслеживать свой прогресс. Кроме того, я обратился к методу «долгосрочная цель -> месячная цель -> недельная цель -> повестка дня», чтобы составить свое расписание, и приложение Asana стало моим лучшим помощником в этом.

Фото: Medium. Отчет в Toggl за июнь 2020

Где учиться

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

Платформы для обучения

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

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

  • Codecademy — Многие рекомендуют эти курсы, но я очень расстраивался, когда не мог выполнить задания. Я всегда застревал на задачах, не понимая, что мне делать.
  • Code School — Я потратил очень много времени на эти курсы. Они мне нравились. Учителя четко объясняют материал. Рекомендую.
  • Treehouse — Эта платформа просто переполнена рекламой. Однако оттуда я узнал много информации, которая была мне действительно нужна. Например, на Treehouse были задания по WordPress для frontend-студентов, что было большой редкостью для онлайн-курсов.
  • freeCodeCamp — Обожаю freeCodeCamp! Это сообщество предлагает четкий путь для новичков. Когда-то я не знал, что делать после того, как освою HTML, CSS и JavaScript, но freeCodeCamp в правильные моменты давал маленькие проекты на протяжении всего пути обучения. Сообщество также выкладывает отличные статьи на Medium или отправляет их на электронную почту. Очень рекомендую.

Фото: Medium. Закладки во время обучения

Каналы на Youtube

YouTube – лучшее место для бесплатного обучения. Вот некоторые каналы, которые мне очень помогли:


  • The Coding Train — Уроки на этом канале ведет Дэниэл Шиффманн, профессор Нью-Йоркского университета. Это самый энергичный учитель, которого я когда либо встречал. Кроме того, в своих видео он очень понятно все объясняет.
  • thenewboston— Здесь рассказывают просто обо всем, что касается программирования. Ведущий канала очень хорошо и просто объясняет сложные вопросы.
  • Academind — Помимо теории на канале можно решать различные задачи. Очень интересно и легко. Советую.
  • Fun Fun Function — Ведущий канала Матиас Петтер – разработчик, который когда-то работал в Spotify и Blackberry. Его канал – прекрасное место для того, чтобы обучиться JavaScript.
  • Linux Academy — Здесь я получил базовые знания AWS.
  • Computerphile — В видео на этом канале рассказывается обо всем, что связано с компьютерами. Это интересно, но я, вероятно, никогда по-настоящему не пойму, о чем там говорят.
  • Eli the Computer Guy — Здесь я узнал, как работать с сетью и серверами.
  • mycodeschool — Был моим лучшим помощником, когда я проходил CS50. На канале четко объясняются вещи, связанные с компьютерами. Мне понравилось.

Фото: Medium. Канал The Coding Train

Статьи

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

Другие полезные источники

  • JavaScript: Understanding the Weird Parts — Отличный курс на Udemy, благодаря которому можно разъяснить многие непонятные вещи касательно JavaScript. Рекомендую.
  • CS50 at Harvard — Я знал, что необязательно обладать глубокими знаниями информатики, чтобы устроиться джуниором в какую-то компанию, но я не мог противостоять соблазну: этот курс казался таким интересным!
  • NTMY — Episode 1 — Pieter Levels — NYMY – подкаст, который ведет талантливый дизайнер Тобиас ван Шнайер. В одном эпизоде он провел интервью с создателем NomadList Питером Левелсом. Я несколько раз слушал его историю, когда мне казалось, что у меня ничего не получится. Это шоу показало мне бесконечные возможности программистов/дизайнеров.

Подкаст NTMY Show

Как найти работу

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

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

Фото: Medium. Tenten.co

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

Наконец. я нашел работу!

Оглядываясь назад

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

Если вы нашли мотивацию, поздравляю вас. Если нет, продолжайте искать.

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

Материалы по теме:

Нашли опечатку? Выделите текст и нажмите Ctrl + Enter

Front-end в 30 … не поздно ли? [закрыт]

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

В данный момент работаю в сфере розничной торговли, заместителем директора магазина, НО всем своим нутром чувствую и понимаю, что это не мое . и что хочу я заниматься web-разработкой — версткой + JS, именно это мне приносит истинное удовольствие и удовлетворение (в плане трудовой деятельности:)).

Я уверен, что на ХэшКод’e много людей, занимающих руководящие должности в IT-сфере и мой вопрос адресован скорее им, итак:

При таких исходных данных как у меня, взяли бы Вы человека на работу верстальщиком?

Для объективной оценки прилагаю несколько работ которые мне довелось выполнить:

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

С уважением, Astor

Закрыт по причине того, что не по теме участниками LEQADA, Peter Olson, Timofei Bondarev, Aries, tutankhamun 5 ноя ’15 в 4:50 .

Похоже, этот вопрос не соответствует тематике сайта. Те, кто голосовал за его закрытие, указывали следующую причину:

  • «Вопросы-опросники запрещены на Stack Overflow на русском. Для получения ответа, перефразируйте ваш вопрос так, чтобы на него можно было дать однозначно правильный ответ.» – LEQADA, Aries, tutankhamun

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

4 ответа 4

Я бы не взял верстальщиком. Причина:

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

Топ-пост этого месяца:  Плагин Contact Form 7 форма обратной связи

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

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

  1. Войти в таком возрасте на рынок достаточно проблематично, если вы конечно не овладели версткой в совершенстве.
  2. Фриланс, там никого не волнует 15, 20 или 30 лет, главное сделанная работа. Попробуйте повыполнять задачи, которые там предлагают, «за так», чтобы проверить себя. Если получается и результат удовлетворяет заказчика, начинайте брать деньги.

P.S. 30 лет не так страшны и если вы чувствуете, что «вот оно дело моей мечты», то всё получится.

Никогда ничего не поздно, бывает не надо. В вашем случае я бы сразу занялся серьезным изучением программирования. Не тратьте время на верстку, на ней можно просидеть довольно долго. Тем более, что сейчас хороший фронтенд-разработчик должен (но не обязан) помимо HTML, CSS и jQuery знать очень много попутных вещей, изучение которых может занять существенное время. Для примера, Bootstrap, Zurb Foundation, Less.js, SASS, COMPASS, SVG. Если будете верстать под фреймворки или CMS, то знание шаблонизаторов тоже не помешает. В итоге на изучение и практику всего этого может уйти уйма времени, а фактически Вы останетесь все тем же верстальщиком. Как вариант, можно напирать на JS и уйти в сторону Node.js. Это направление очень перспективное сейчас.

Ответ для тех, кто будет читать тему позже.

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

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

Проблема самостоятельного обучения не в том, что человек формально это не может, он просто обычно находится не в том окружении, читает не то, делает не то. Это вопрос эффективности обучения, нужна практика и связка с профессионалами. А профессионалы считают, что лучше не надо ему в 30 лет начинать.

А я предлагаю персональные тренировки по фронтенду, карьерные консультации, трудоустройство, стажировки в стартапах.

Опыт поиска работы frontend разработчика

Работа по найму — взаимовыгодное сотрудничество. Знания/опыт в обмен на услуги.

Мне почти 30 лет. Начиная с третьего курса и на протяжении почти 10 лет (9 лет 7 месяцев) я работал на одном официальном месте работы и периодически на нескольких работах по совместительству. Основная организация — Институт динамики систем и теории управления, занимается научными исследованиями по математике и информатике. Стоить отметить, что за время работы исследователем около 8 лет я занимался разрабокой ПО, из них около 4 лет относятся к web разработке (full stack). Плюс 4 последних года я преподавал студентам в университете.

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

Тезисно ожидания от новой работы выглядели следующим образом:

  • Продуктовая команда
  • Современная методология разработки
  • Frontend разработка на фреймворке Angular или Vue
  • Компания занимает уверенное положение на рынке
  • Перспектива карьерного роста и заработка

Обратив внимание на сервис зарплат от моего круга, возникло желание найти удалённую работу. Для сравнения:

  • 256 зарплат, 135 154 руб. в месяц (удаленно, Москва), при этом:
  • 15 зарплат, 124 433 руб. в месяц (удаленно, Иркутск)
  • 28 зарплат, 106 414 руб. в месяц (удаленно, Красноярск)
  • 36 зарплат, 162 850 руб. в месяц (удаленно, Новосибирск)
  • 11 зарплат, 103 636 руб. в месяц (удаленно, Томск)

В целом, работая удалённо люди в глубинке зарабатывают как московские разработчики. В апреле 2020 я решил проверить рынок труда: разместил резюме на headhunter’е с прицелом на удалённую работу frontend разработчиком и стал неспешно ждать предложений.

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

И таких штук по 20 в день. Но на одно собеседования на сетевой маркетинг я всё-таки сходил, попрактиковался. Чисто проговорить незнакомому человеку о своём опыте, жизненном пути и целях.

О резюме и предложениях

Так как я никогда не менял работу, то написание резюме, как оказалось, «хромало». В основном резюме я перечислил всё разнообразие задач, с которыми я сталкивался и успешно решил. Это ошибка, не делайте так. Откликов было категорически мало. Резюме пишется под вакансию. Выкидывайте всё, что не относится к вакансии. Также не стоит указывать должности по трудовой книжке. У меня была должность младшего научного сотрудника, но занимался программированием. Смело меняем название на «Разработчик ПО». Название должности должно отражать суть работы. Резюме это рекламный буклет, где вы себя продаёте. Продаёте свои услуги на рынке труда работодателям. Резюме смотрят специалисты по подбору персонала, секунд за 10-20 ваше резюме должно их заинтересовать. Поэтому название желаемой должности должно коррелировать с названием вакансий, а самые главные вещи (навыки, умения, опыт, технологии), почему именно Вас должны нанять, следует размещать в первом абзаце резюме. Совокупность этих рекомендаций даёт хороший эффект.

// Из интересного. Периодически поступали предложения, где в требованиях указаны серьёзные запросы, которым я однозначно не подхожу, например:

Опыт работы на позиции старшего (либо ведущего) разработчика в одной из сильных IT-компаний (Яндекс, Mail.ru Group, Лаборатория Касперского, Вконтакте, JetBrains и т.д.) не менее двух лет обязателен.

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

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

Об удалённой работе

Достаточно много компаний указывают возможность IT сотрудникам работать удалённо. Несмотря на всеобщее восхищение удалённой работой, мне она не нравится. Я всё-таки за работу непосредственно в коллективе людей, где можно общаться. Тем более у меня нет возможности работать дома, надо снимать офис или идти в коворгинг. Опять же в реальности готовы на полностью удалённую работу сравнительно немного компаний. Часто требуется присутствие в рабочие часы в часовом поясе работодателя, например ответ от Ольги, рекрутера SkyEng:

Хочу сразу сказать что у нас все команды должны быть на связи с 11 до 16 мск, т.е. до 21.00 по Иркутскому времени. Если вам это подходит — необходимо выполнить тестовое задание https://***, после успешного выполнения — интервью с руководителем.

Соответсвенно, такие требования серьезно ограничивают круг вакансий, находясь в +5 от Москвы, так как львиная доля всего рынка продуктовой разработки находится в Питере и Москве. С другой стороны, конечно, имело смысл поискать работу где-нибудь в Австралии, но как тогда быстро погрузиться в работу?

Вакансии

За 3 месяца я рассмотрел примерно 15 вакансий, из них оказались интересными 5 (для них я выполнил тестовое задание). Компании обычно дают ответ на отклик день в день или на следующий рабочий день. Первой компанией с которой я завязался была Atlant.io. Это было предложение. Началось с собеседование с HR, потом тестовое задание, техническое собеседование и компания перестала отвечать. Я нашёл в телеграме еще 2 человек, которые также проходили собеседование в эту компанию, написал им в телеграм. Оба ответили, что с ними прервали общение аналогичным образом. Проехали. После этого я выбирал компании самостоятельно. Сделал 4 отклика (3 на front и 1 fullstack). На все 3 отклика на вакансию front-end разработчика я получил офферы, а отклик на вакаснию full-stack (PHP + Angular) был пробой сил, так как там была высокая зарплата, но не прошёл по тестовому заданию: нужны были хорошие знания Symfony (PHP фреймворк). Отсюда вывод: хорошие места следует искать самостоятельно.

Время от отклика до предложения о работе: 1) Точка-Банк (удалённая работа): 34 дня: собеседование с HR, тестовое задание, техническое собеседование, собеседование-знакомство с командой, проверка службы безопасности. 2) DIS-Group: 14 дней: тестовое задание, техническое собеседование, собеседовние с командой и директором. При этом ответ на отклик пришёл через 11 дней (уже думал, что не подхожу по резюме) 3) ISPsystem: 26 дней: краткий телефонный разговор с HR, собеседование с руководителем UX и с руководителем Frontend, тестовое задание, собеседование с руководителем Frontend и генеральным директором.

Для поиска работы использовлись 3 ресурса.

  • headhunter
  • js_jobs в telegram. Интересен тем, что вакансии с вилками по зарплате.
  • moikrug

Тестовые задания

Обычно тестовое задание дают сроком на неделю. Примерно столько времени я на них и тратил: 4-5 вечеров по 2 часа + до одного целого выходного. Бывало и дольше: задание по созданию калькулятора обыкновенных дробей заняло дня 3: в университете у нас не было «Алгоритмов и структур данных» => требовалось изучение деревьев + надо было придумать алгоритм куда добавлять новые узлы в зависимости от приоритета выполнения арифметических операторов.

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

О зарплатах

Как это ни странно звучит, но

Ваша зарплата это то, насколько вы можете себя продать на рынке труда.

Зарплаты фронтенд разработчиков

Зарплаты JavaScript разработчиков

  • Рынок зарплат фронтенд-разработчиков Данные были собраны в конце декабря 2020 года
  • Исследование: сколько зарабатывают фронтенд-разработчики? Апрель 2020.
    Статистика показывает, что middle-разработчики в регионах России и СНГ зарабатывают в среднем 80 тысяч рублей в месяц, а при смене работы повышают свои ожидания до 95 тысяч.
  • Зарплаты США по визе H1B от работодателей
  • Зарплаты разработчиков Украины — декабрь 2020
  • Общее исследование из Германии

Про собеседование

Много полезной информации про собеседование я подчерпнул из видеороликов Михаила Портнова, основателя и владельца школы тестировщиков программного обеспечения в Калифорнии. У него большой опыт трудоустройства людей в ИТ компании. Youtube плейлит Резюме, поиск работы, интервью.

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

  • На собеседовании надо говорить не какой я умный/хороший, а какая компания хорошая и как я решу её проблемы. Контекст такой, что я забираю эту, эту, и эту проблему у Вас.
  • Не надо говорить, что вы внимательно изучили описание вакансии и идеально подходите на неё. Из описания кандидат не может судить о соответствии навыков представлению компании. Может оказаться так, что компания сама точно не знает идеального кандидата.
  • Если вас пригласили на собеседование после прохождения тестового задания, значит вы технически можете выполнять работу, но надо проверить насколько вы подходит для команды, можно ли сходить с Вами на обед и обсудить футбол.
  • Отсюда вариант ответа на вопрос «Почему мы должны вас нанять?» в духе «Я хороший человек. Со мной на приятно ходить на обед и обсуждать футбол.» Работодатель выбирает среди тех, кто смог в тестовое задание.
  • Про вопросы «Расскажите о себе / Как вы сюда попали? / Кем вы видите себя через 3–5 лет?» Ответ — рассказ о своём жизненный пути. У кандидата должно быть понимание куда он движется. Начать следует с образования, чем занимался. Я рассказывал примерно так:
    • Школу закончил в информационном классе.
    • Университет закончил по специальности «информационные технологии»
    • Аспирантуру закончил по специальности «информационные системы и процессы».
    • Работа в лаборатории «комплексных информационных систем» + преподавание в университете на кафедре «информационных технологий»
    • Ушёл во frontend, потому что за ним будущее.
    • Я осознанное меняю жизнь к лучшему. Хочу делать что-то существенное.
    • Через n лет я ключевой сотрудник компании, профессионал работающий на сложных проектах.
  • Если я что-то не знаю, то я это знаю уже сегодня вечером
  • Про зарплату. Если вы действительно сильный кандидат, то можно предложить прямому работодателю такой вариант: «Я хочу минимизировать ваш риск и свой. Вы мне даёте минимум вилки рассматриваемой вакансии. А по истечению испытательного срока делается пересмотр зарплаты, это должно быть отражено в контракте/трудовом договоре»

Что стоит спросить у работодателя:

  • Какой ваш идеальный кандидат?
  • Как вы будете судить подхожу ли я вам после испытального срока?

Технические темы JavaScript на собеседовании

Вся информация доступна в современном учебнике по JavaScript.

  • Event loop (setTimeout, promise)
  • call, bind, apply
  • Замыкания + область видимости, hoisting
  • Передача по ссылке и по значению
  • ES6 (spread/rest, генераторы/итераторыб let/const/var)
  • Async/await
  • Армия функций

Выбор

Итак, на руках было 3 предложения. В плане денежного вознаграждение они были примерно равны, имея разброс на старте в 7000 ₽ (max в Точке, среднее в DIS, min в ISP). Я руководствовался тезисами, которые были обозначены вначале поиска работы. Наиболее сложно было выбирать между ISPsystem и Точкой. В моих рассуждениях компании примерно равны, Точка чуть помасштабнее, а ISP лучше с бытовой точки зрения (родной город, нет необходимости искать офис, отчасти знакомый коллектив). Я выбрал ISP.

Routes to finance

CSS-фреймворки: добро или зло? (none 2020).

В мире веб-разработок довольно часто встречаются термины «front end» и «back end». Просто для обновления, передняя разработка — это все части веб-сайта, которые видят пользователи, в то время как задняя часть — это больше о функциях «за кулисами».

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

Что такое Front-End Framework?

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

Как правило, интерфейсные интерфейсы содержат следующие компоненты:

Сетка, которая упрощает организацию элементов дизайна вашего сайта

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

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

Почему я должен использовать его?

Есть много веских причин использовать интерфейсную инфраструктуру вместо запуска всего вашего кода с нуля:

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

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

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

Прежде чем двигаться дальше, я также хочу пояснить, как

не использовать интерфейсные рамки! Рассмотрение их в качестве замены для получения навыков разработки кода не принесет вам никакой пользы. Сначала ознакомьтесь с HTML и CSS, а , затем вы можете начать использовать ярлыки. Относитесь к своей структуре как к помощнику, а не к костыли. Примеры Front-End Frameworks

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

Bootstrap: самый популярный из них. Имеет тонны звезд на Github и много ресурсов, чтобы ответить на ваши вопросы. Один из самых простых в использовании, но некоторые говорят, что он имеет очень отличительный вид «Bootstrap».

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

Стилус: выразительный и стильный язык CSS. Эта структура может использоваться только на узле. js.

Семантический интерфейс: краткий, интуитивно понятный и делает отладку вашего кода красивой и простой. Дает вам много свободы дизайна и адаптируется к вашим потребностям.

UI Kit: структура, которая будет использоваться, если вы заинтересованы в разработке приложений для iOS.

Имеет базовый стиль, который упрощает разработку вашего собственного сайта.

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