Вы когда-нибудь просматривали веб-сайт и просто восхищались дизайном, потоком данных и общим пользовательским интерфейсом? Вы, должно быть, заглянули на чей-то веб-сайт с резюме и подумали о своем собственном веб-портфолио, чтобы продемонстрировать удивительные вещи, которые вы сделали. Но вы не знаете, с чего начать… не так ли? Что ж, вы начинаете с изучения основных языков, таких как HTML, CSS и Javascript, и переходите к другим навыкам, совершенствуя основы.

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

Будьте в курсе с Javascript

Происхождение Javascript и его эволюция.

Netscape решил добавить язык сценариев к навигатору, и таким образом в 1995 году родился Javascript. Примерно в то же время Microsoft дебютировала с Internet Explorer (IE), что привело к хорошо известному browser war с Netscape. Это было время, когда Javascript не очень хорошо принималось веб-сообществом. Считалось, что javascript долго не протянет.

IE доминировал в войне браузеров до начала 2000-х годов, и в этот период сценарии на стороне клиента не развивались. Но все это изменилось в 2004 году, когда преемник Netscape Mozilla выпустил Firefox. ECMA 4 был стандартизирован в это время, а термин AJAX был придуман Джесси Джеймсом Гарретом в официальной версии. Он также описал набор технологий (на основе javascript) для веб-разработки, с помощью которых может выполняться фоновая обработка данных, что позволяет избежать необходимости полной перезагрузки страницы. Наступала новая эра для Javascript, и ее ожидала революция, которую возглавили библиотеки с открытым исходным кодом и сообщества, которые сформировались вокруг них. Затем, в 2008 году, Google вступил в гонку с браузером Chrome с Just In Time Compilation (JIT) и V8 Javascript Engine, который был быстрее, чем его конкуренты.

Перенесемся в сегодняшний день

Javascript является наиболее неотъемлемой частью веб-разработки, и за последние 10 лет вокруг него появилось множество библиотек и фреймворков. Вы можете использовать любую среду разработки, будь то Java, Ruby on Rails или PHP, Javascript - единственная константа, и в ближайшее время она никуда не денется. Таким образом, любой и каждый, кто желает заниматься фронтенд-разработкой (или веб-разработкой, если на то пошло), должен как можно лучше изучить Javascript и оставаться в курсе стандартов ECMAScript.

Фреймворки и библиотеки упрощают вашу жизнь

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

Одними из самых популярных фреймворков Javascript являются Angular, React и Vue. Фреймворки javascript упрощают разработку компонентов с использованием модульного подхода. Каждая структура предоставляет другой набор функций, чтобы дать вам больше контроля над тем, как данные интерпретируются / контролируются / обновляются в вашем приложении.

Затем у вас есть библиотеки компонентов пользовательского интерфейса, которые предоставляют вам предварительно определенные компоненты с настраиваемыми параметрами стиля. С помощью фреймворков пользовательского интерфейса вы можете сэкономить важное время на создание темы для своего приложения и определение этой безупречной кнопки, просто импортировав Button компонент из этой библиотеки. Некоторые из популярных библиотек пользовательского интерфейса, которые вы можете попробовать, - это Element-UI, React-Strap и Material-UI.

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

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

Github - ваш новый лучший друг

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

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

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

Всем этим все еще можно как-то управлять, но самой большой проблемой, с которой я столкнулся при разработке Front-end, было тестирование моего веб-приложения на моем телефоне или его показ кому-то другому, потому что у меня были очень ограниченные знания о хостинг-приложениях. Я хотел разместить свое приложение с наименьшими усилиями, а потом услышал, что Github позволяет размещать веб-приложение на своем сервере абсолютно БЕСПЛАТНО. Эта функция называется Github Pages, и ее можно найти на вкладке настроек репозитория. Удивительно, правда? Да, но есть загвоздка! Вы не можете создать сервер с помощью Github Pages. Таким образом, практически любое стандартное интерфейсное приложение, которое в противном случае можно было бы запустить в браузере локально без необходимости создания сервера, можно развернуть на страницах Github. И чтобы добавить вишенку - вы можете дать своей странице Github собственное доменное имя, избегая всех хлопот по развертыванию вашего приложения на облачных серверах.

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

Улучшение процесса разработки с помощью SDLC.

SDLC (Жизненный цикл разработки программного обеспечения) - это процесс, которому отрасли следуют для плановой и систематической разработки программного обеспечения, тем самым обеспечивая высококачественный продукт с минимальными затратами. Существуют разные модели разработки, такие как agile, lean, waterfall и т. Д.

Следуя SDLC

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

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

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

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

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

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

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

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

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

Подведение итогов!

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