Рубрики
Без рубрики

От нуля до переднего героя (часть 2)

Эта статья является частью серии «от нуля до серии Front-End Hero». В первую очередь вы узнали, как создавать макеты с HTML и CSS, а также несколько лучших практик. В первой части мы будем сосредоточиться на изучении JavaScript в качестве автономного языка, как добавить интерактивность к

Автор оригинала: Jonathan Z White.

Эта статья является частью серии «от нуля до серии Front-End Hero». В Часть одна Вы узнали, как создавать макеты с HTML и CSS, а также несколько лучших практик. В первой части мы будем сосредоточиться на изучении JavaScript в качестве автономного языка, как добавить интерактивность к интерфейсам, дизайну JavaScript и архитектурных узоров и как создавать веб-приложения.

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

Если вы еще этого не читали, не прочитайте, и сделайте это, прежде чем читать.

От нуля до переднего героя (часть 1) Полное руководство по изучению фронтального развития Medium.com.

Основы JavaScript

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

Язык

Прежде чем изучать, как применить JavaScript в Интернет, сначала узнайте о самом языке. Чтобы начать, прочитайте Mozilla Developer Network’s Языковые основы Crash Course Course Отказ Этот учебник научит вам базовые языковые конструкции, такие как переменные, условные условия и функции.

После этого прочитайте следующие разделы в MDN Руководство JavaScript :

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

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

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

Теперь, когда у вас есть базовое понимание JavaScript в качестве языка, следующий шаг – применить его в Интернет. Чтобы понять, как JavaScript взаимодействует с веб-сайтами, вы сначала должны знать о Объектная модель документа (DOM) Отказ

Дом представляет собой представительскую структуру HTML-документов. Это древовидная структура, состоящая из JavaScript объекты которые соответствуют HTML-узлам. Для дальнейшего чтения о DOM, прочитайте Что такое DOM CSstricks. Это обеспечивает простое и простые объяснения дома.

JavaScript взаимодействует с DOM для изменения и обновления его. Вот пример, где мы выбираем HTML-элемент и измените его содержимое:

var container = document.getElementById("container"); 
container.innerHTML = 'New Content!';

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

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

  • Что такое дом?
  • Как вы запрашиваете элементы?
  • Как вы добавляете слушателей событий?
  • Как вы меняете свойства узла DOM?

Для списка общих взаимодействий JavaScript DOM, проверьте JavaScript функции и помощники пройдя. Этот сайт предусматривает примеры того, как делать такие вещи, как Set Стили на HTML элементы и Прикрепите слушатели событий клавиатуры Отказ И если вы хотите раскопать глубже, вы всегда можете прочитать раздел на DOM в Красноречивый JavaScript Отказ

Инспектор

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

Вот a Учебное пособие на использовании инструмента разработчика Chrome. Если вы используете Firefox, вы можете проверить это Учебное пособие Отказ

Практикуя основы

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

Эксперимент 1.

Для эксперимента 1, перейдите к Airbnb Откройте свой браузер Инспектор страницы и нажмите на Консольная вкладка Отказ Здесь вы можете выполнить JavaScript на странице. Что мы собираемся сделать, это повеселиться с манипулированием некоторых элементов на странице. Посмотрите, можете ли вы сделать все следующие манипуляции DOM.

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

  • Выберите тег заголовка с уникальным именем класса и измените текст
  • Выберите любой элемент на странице и удалите его
  • Выберите любой элемент и изменить один из свойств CSS
  • Выберите определенный тег раздела и переместите его на 250 пикселей
  • Выберите любой компонент, как панель, и настройте его видимость
  • Определите функцию с именем Досметочное это предупреждает о «Hello World», а затем выполнить его
  • Выберите конкретный тег абзаца, добавьте Нажмите Слушатель событий к нему и запустить Досметочное Каждый раз, когда событие уволено

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

var header = document.querySelector('.text-branding')
header.innerText = 'Boop'

Основная цель этого эксперимента – взять некоторые из тому, что вы узнали о манипулировании JavaScript и DOM и увидите его в действии.

Эксперимент 2.

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

Больше JavaScript

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

Язык

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

Императив против декларативного

Существует два типа подходов к тому, как JavaScript взаимодействует с DOM: императивным и декларативным. С одной стороны, декларативное программирование фокусируется на что случается С другой стороны, императивное программирование фокусируется на что а также как.

var hero = document.querySelector('.hero')
hero.addEventListener('click', function() {  var newChild = document.createElement('p')
  newChild.appendChild(document.createTextNode('Hello world!'))    newChild.setAttribute('class', 'text')    newChild.setAttribute('data-info', 'header')    hero.appendChild(newChild) })}

Это пример императивного программирования, где мы вручную запрашиваем элемент и хранилище UI State в DOM. Другими словами, фокусировка на Как достичь чего-то. Самая большая проблема с этим кодом состоит в том, что она хрупкая. Если кто-то работает над кодом, меняет имя класса в HTML из Герой к злодей Слушатель событий больше не будет огонь, поскольку нет Герой класс в доме.

Декларативное программирование решает эту проблему. Вместо того, чтобы выбрать элементы, вы оставляете его на рамки или библиотеку, которую вы используете. Это позволяет вам сосредоточиться на что вместо как. Для получения более читать, проверить Состояние JavaScript – переход от императивного доклада и Три D’веб-разработка № 1: Декларативный против Императив Отказ

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

Ajax.

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

Например, когда вы отправляете форму на веб-сайте, он собирает ваш вход и делает HTTP-запрос, который отправляет эти данные на сервер. Когда вы размещаете Tweet On Twitter, ваш клиент Twitter производит HTTP-запрос на API Twitter Server и обновляет страницу с ответом сервера.

Для чтения на AJAX Проверить Что такое ajax Отказ Если вы все еще не совсем получаете концепцию Ajax, посмотрите на Объясните это, как я 5, что такое ajax Отказ И если все этого недостаточно, вы можете прочитать красноречивый JavaScript’s Глава на http.

Сегодня предстоящий стандарт браузера для создания HTTP-запросов является Извлекать Отказ Вы можете прочитать больше о Fetch в этой статье Дэн Уолш Отказ Он охватывает, как Fetch работает и как его использовать. Вы также можете найти извлечение Polyfill с документацией здесь Отказ

jquery

До сих пор вы занимаетесь манипуляциями DOM только с JavaScript. Правда в том, что есть много библиотек Manipulation DOM, которые предоставляют API для упрощения кода, который вы пишете.

Один из самых популярных библиотек Manipulation DOM – jquery Отказ Имейте в виду, jQuery – это императивная библиотека. Он был написан до того, как передние системы были такими же сложными, как сегодня. Сегодня ответ на управляющий комплекс UIS являются декларативными каркасами и библиотеками, такие как угловые и реагирующие. Тем не менее, я все еще рекомендую вам изучать jQuery, потому что вы будете более чем встречаться во время своей карьеры в качестве фронта.

Чтобы узнать основы jQuery, проверьте jQuery’s Учебный центр Отказ Идет шаг за шагом через важные концепции, такие как анимации и Обработка событий Отказ Если вы хотите больше рук на руководстве, вы можете дать кодекадемы jQuery Course выстрел.

Имейте в виду, JQuery не всегда является решением для императивных манипуляций DOM. Плейс и Возможно, вам не понадобится jquery Есть две хорошие ресурсы, которые показывают эквивалентные функции JavaScript для часто используемых функций jQuery.

ES5 против ES6

Еще одна важная концепция, чтобы понять о JavaScript Ecmascript И как это относится к JavaScript. Существует два основных аромата JavaScript, что вы встретите сегодня: ES5 и ES6. ES5 и ES6 являются стандартами Ecmascript, которые использует JavaScript. Вы можете думать о них как о версиях JavaScript. Окончательный проект ES5 был завершен в 2009 году, и это то, что вы использовали до сих пор.

ES6, также известный как ES2015, является новым стандартом, который приносит новые языковые конструкции, такие как Константы , Классы и Шаблонные литералы к JavaScript. Важно отметить, что ES6 приносят новые языковые функции, но все же оказывают их семантически с точки зрения ES5. Например, классы в ES6 являются просто синтаксический сахар над JavaScript Прототипов наследования Отказ

Важно знать как ES5, так и ES6, как вы увидите приложения сегодня, которые используют один или другой. Хорошее введение в ES6 это ES5, ES6, ES2016, ES.Next: Что происходит с JavaScript версией И Дэн Валин Начало работы с ES6 – следующая версия JavaScript Отказ После этого вы можете увидеть полный список изменений от ES5 до ES6 в ES6 Особенности Отказ Если вы хотите еще больше, проверьте этот Github Repository Особенности ES6.

Больше практики

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

Эксперимент 3

Эксперимент 3 будет сосредоточен на преподавании того, как применять такие навыки, как манипулирование DOM и jQuery. Для этого эксперимента мы собираемся принять более структурированный подход. Эксперимент 3 будет клонировать домашнюю страницу Flipboard, следуя вместе с CodeCademy’s Домашняя страница Flipboard и добавить интерактивность с JavaScript руководство.

Во время учебника сосредоточиться на понимании того, как сделать сайт Interactive, когда сделать его интерактивным, и как применить jQuery.

Эксперимент 4.

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

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

JavaScript Frameworks

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

Я не буду включать описание каждого JavaScript Framework. Тем не менее, вот быстрый список из нескольких рамки: Угловой , Реагировать + Flux , Эмбер , Aurelia , Vue и Метеор Отказ Вам не нужно учиться каждую структуру. Выберите один и узнайте это хорошо. Не преследуйте после каркасов. Вместо этого понять основные философии программирования и принципы, на которых строятся рамки.

Архитектурные узоры

Прежде чем смотреть на каркасы, важно понимать несколько архитектурных узоров, которые рамоты, как правило, используют: Модель-просмотр-контроллер , Model-View-ViewModel и Модель-вид-презентатер Отказ Эти шаблоны предназначены для создания четких Разделение опасений между слоями приложений.

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

Чтобы узнать больше об этих шаблонах, сначала прочитайте о MVC на Chrome Developers Отказ После этого прочитайте Понимание MVC и MVP (для разработчиков JavaScript и Backbone) Отказ В этой статье не беспокойтесь о том, чтобы учить позвоночник, просто пройдите по частям с объяснениями MVC и MVP.

Addy Osman также написал о MVVM в Понимание MVVM – руководство для разработчиков JavaScript Отказ Чтобы узнать о происхождении MVC и почему это пришло, прочитайте эссе Мартина Фаулера на Ги архитектуры Отказ Наконец, прочитайте раздел, JavaScript MV * Шаблоны в изучении образцов дизайна JavaScript. Обучение дизайна JavaScript Design это фантастическая бесплатная онлайн-книга.

Шаблоны проектирования

JavaScript Frameworks не изобретают колесо. Большинство из них полагаются на Дизайн шаблонов Отказ Вы можете подумать о проектных моделях как общие шаблоны для решения распространенных проблем в разработке программного обеспечения.

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

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

Angularjs.

Angularjs – это JavaScript MVC И иногда MVVM фреймворк. Он поддерживается Google и взял сообщество JavaScript штормом, когда он был впервые выпущен в 2010 году.

Угловой является декларативной структурой. Одним из самых полезных чтений, которые помогли мне понять, как перейти от императивных для декларативного программирования JavaScript было Как angularjs отличается от jQuery на стойке.

Если вы хотите узнать больше о угловом углу, посмотрите угловой Документация Отказ У них также есть учебник под названием Угловая кошка что позволяет прыгать в кодировку прямо сейчас. Более полное руководство по изучению угловата можно найти в этом Github Repository Тим Джейкоби. Также проверьте эту окончательную Лучшая практика Stureguide написано Джоном Папа.

Реагировать + поток

Угловой решает много проблем, которые разработчики сталкиваются с наращиванием сложных интерфейсных систем. Еще один популярный инструмент – Реагировать , который является библиотекой для строительства пользовательских интерфейсов. Вы можете думать об этом как о V в MVC. Поскольку React – это только библиотека, она часто видела с архитектурой, известной как Flux Отказ

Facebook разработал реагирование и поток для решения некоторых недостатков MVC и его проблем в масштабе. Посмотрите на их известное представление Hacker Way: переосмысление разработки веб-приложения в Facebook Отказ Он проходит через поток, и это происхождение.

Чтобы начать работу с реагированием и потоком, сначала научитесь реагировать. Хороший грунт – это Реагистрационная документация Отказ После этого проверить Rect.js Введение для людей, которые знают достаточно JQuery, чтобы получить Чтобы помочь вам перейти от мышления jQuery.

Как только у вас есть базовое понимание реагирования, начните поток обучения. Хорошее место для начала – это Официальный поток документации Отказ После этого проверить Awesome React , который представляет собой курируемый список ссылок, которые помогут вам продвинуться дальше в вашем обучении.

Практикуя с рамки

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

Эксперимент 5.

Эксперимент 5 состоит в том, чтобы отделить и восстановить приложение Todo MVC с использованием Framework Agnostic JavaScript. Другими словами, простой старый JavaScript без рамки. Цель этого эксперимента – показать вам, как MVC работает без смешивания в специфическом синтаксисе структуры.

Чтобы начать, проверьте конечный результат на Todomvc Отказ Первый шаг состоит в том, чтобы создать новый проект локально и сначала установить три компонента MVC. Поскольку это вовлеченный эксперимент, ссылаться на полный исходный код в этом Github Repository Отказ Если вы не можете полностью повторить проект или нет времени, это нормально. Загрузите код REPO и играйте с различными компонентами MVC, пока вы не поймете, как они коррелируют друг другу.

Эксперимент 6.

Эксперимент 6 был хорошим упражнением в применении MVC. Понимание MVC является важным шагом к изучению JavaScript Frameworks. Эксперимент 6 – следить за руководством SCOTC.IO, чтобы построить клон Etsy с угловым.

Построить клон Etsy с угловым и stamplay научит вас построить веб-приложение с угловым интерфейсом с API И как структурировать крупные проекты. После этого учебника сможем ответить на следующие вопросы.

  • Что такое веб-приложение?
  • Как наносится MVC/MVVM с угловым?
  • Что такое API и что это делает?
  • Как вы организуете и структурируете большие базы кода?
  • Каковы преимущества разрушения вашего UI на директивные компоненты?

Если вы хотите попробовать свою руку в создании более угловых веб-приложений, попробуйте Создайте приложение обновления статуса в реальном времени с Angularjs & Firebase Отказ

Эксперимент 7.

Теперь, когда вы применили MVC, пришло время попробовать Flux Отказ Эксперимент 7 – построить список Todo, используя Реагировать и архитектура потока. Вы можете найти полный учебник на Документация Facebook Flux Documentation Отказ Это научит вас пошаговать, как использовать React на создание интерфейсов и как Flux применяется к созданию веб-приложений.

После того, как вы завершили этот учебник, вы можете перейти на более связанные учебники, такие как Как построить приложение TODO, используя ract, redux и immutable.js и Создайте приложение Microblogging с потоком и реагировать Отказ

Оставаться током

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

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

Узнайте пример

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

Стильгиды

JavaScript Styleguides – это наборы констеций кодирования, предназначенные для того, чтобы помочь считать читабельным и ремонтом кода.

Кодовые базы

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

Заворачивать

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

Эта статья является второй частью двух частей серии. Что не хватает этого руководства, это введение в Узел , который является платформой, которая позволяет JavaScript работать на серверах. В будущем я могу написать третью часть, которая идет по поводу разработки на стороне сервера с узлом и вещами, такими как NoSQL Базы данных.

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

Снимание Если вам понравилась эта статья, это будет много значит, если вы ударите кнопку «Рекомендовать» или «Поделиться с друзьями».

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

Читайте ещё по теме: