JavaScript - мой любимый язык.
В области, где решения логических задач могут быть такими же креативными, как и дизайн, мы движемся к определенным языкам - языкам, которые описывают наши мыслительные процессы или названия, которые могут вызвать разрыв в общении, или крайне самоуверенных разработчиков.
JavaScript заполняет этот пробел, существуя как универсальный и объединяющий язык. Независимо от того, считаете ли вы себя фронтендом, бэкендом или полным стеком, в какой-то момент вы прямо или косвенно взаимодействовали с JS. Это неизбежно и чрезвычайно гибко, предоставляя разработчикам возможности от дизайна и творчества в P5.js до машинного обучения в deep.js, от рендеринга на стороне сервера в Node.js до рендеринга на стороне клиента в React. js .
После написания кода на JavaScript - от jQuery до Node.js и от Express до React.js - я нашел язык, который мне нравится. Вот пять моих любимых концепций, которые нужно усвоить, независимо от того, уловил ли я их сразу (или нет!):
5. Синтаксис обещания Async / Await.
Люблю тренды. Они держат нас в курсе и поддерживают наш разговор в новом свете. Поднимаемся ли мы сразу на борт или же они сразу же отталкивают нас - они заставляют нас задуматься.
Еще интереснее приобщаться к новым идеям и концепциям программирования. Я чувствую себя таким модным, когда переключаюсь со старого синтаксиса написания обещаний на async / await.
Я имею в виду, что «async / await» звучит круто. Плюс есть и практические преимущества!
Это СУХОЙ. Следовательно, он более читабелен и создает более отзывчивый код.
Так что присоединяйтесь к «крутой толпе», потому что это одна тенденция, которая может длиться какое-то время. Давайте вместе проведем рефакторинг:
router.post('/', (req, res) => {
const newUser = new User(req.body)
const user = newUser.save()
.then((user) => {
res.json(user)
})
.catch((err) => {
console.log(err)
})
})
Обещания позволяют нам совершать вызовы API или базы данных на JS. «Async» объявляет асинхронную функцию, которая возвращает обещание, поэтому мы поместим это ключевое слово непосредственно перед функцией, которая возвращает обещание:
router.post('/', async (req, res) => {
const newUser = new User(req.body)
newUser.save()
.then((user) => {
res.json(user)
})
.catch((err) => {
console.log(err)
})
})
Во-вторых, мы хотим дождаться возврата обещания. Поскольку в этом случае мы будем ожидать нового пользователя, мы можем просто добавить «await» перед информацией, которой мы будем назначать переменную «newUser».
router.post('/', async (req, res) => {
const newUser = await new User(req.body)
const user = await newUser.save()
.then((user) => {
res.json(user)
})
.catch((err) => {
console.log(err)
})
})
Теперь мы можем удалить метод «.then» и сообщить функции, что мы хотим делать с новой информацией. Однако async / await обрабатывает ошибки с помощью команды try / catch. Пытаться и ловить - это как условия. Если обещание разрешено, будет выполнен код в квадратных скобках попытки; однако, если обещание отклонено, «уловка» выполнит свой код. В этом случае мы хотели бы отправить объект JSON в качестве ответа на запрос клиента; однако, если ошибка прерывает его успешное выполнение, ошибка будет занесена в консоль.
router.post('/', async(req, res)=>{
const newUser = new User(req.body)
const user = await newUser.save()
try{
res.json(user)
}
catch(err){
console.log(err)
}
})
Я просто люблю это!
4. Ternary’s
Ternary’s - это особенный класс. В мире, полном if / else, переключателей и других многострочных условных операторов, тернарность приходит, чтобы спасти положение в одной красивой строчке кода.
{doILikeJavaScript? ‹H1› «Я люблю JS!» ‹/H1›: null}
Приведенное выше утверждение возвращает "Я люблю JS!" потому что условие doILikeJavaScript как раз оказывается истинным.
Ternary - отличный способ написать однострочные условные операторы, когда у вас есть только два условия, которые могут быть выполнены. По сути, если условие истинно, будет выполнена строка кода перед двоеточием; в противном случае выполняется вторая строка.
Сначала я застрял на if / else, поскольку синтаксис казался более интуитивным при использовании условного языка; однако я начал писать троичные и, возможно, никогда не вернусь!
Я почувствовал себя таким успешным, когда наконец смог написать синтаксис для переключения и отображения div на экране! См., Например, (+) Записи моего группового проекта! Просто войдите в систему под именем пользователя nincha, поскольку мы все еще разрабатываем логику для создания новых пользователей.
3. Redux
Я не эксперт (пока!), Поэтому, если вы хотите узнать больше о Redux, эта статья - отличное введение в управление состоянием в Redux и может вывести вас из лабиринта управления состоянием в React. Когда передача реквизита становится беспорядочной и запутанной, Redux становится компасом, который выведет вас из лабиринта React, который вы, возможно, изначально создали.
Это простая для понимания концепция, но для ее практического применения требуется время. Фактически, Redux был одной из концепций, которые я сразу понял из вышеупомянутой статьи.
Однако понимание и применение - две очень разные идеи. В настоящее время я занимаюсь рефакторингом некоторого кода, чтобы лучше понять Redux здесь. Так что, если у вас есть какие-то указания для меня, я хотел бы их услышать!
2. React.js
Когда знакомились с новыми концепциями, я уверен, что все мы сталкивались с неуловимой. Более того, я уверен, что мы все преодолели эту концепцию и почувствовали себя даже более удовлетворенными этим достижением, чем когда мы понимали концепции, более интуитивно понятные для нас.
Хотя React не был для меня ускользающим, это определенно был большой зверь, с которым я хотел справиться.
Библиотеки «View», такие как «Handlebars» или erb (в Ruby), предоставляют пользовательский интерфейс, но перенос веса рендеринга на клиентскую сторону делает сайты более быстрыми. Фреймворки рендеринга на стороне клиента, такие как React и Angular, также лучше разделяют проблемы, упрощая процесс предоставления представлений пользователю.
Мне нравится React не только из-за него, но он еще и очень интуитивно понятен, если вы уже научились манипулировать DOM в jQuery / JS.
Здесь также собраны лучшие документы, которые я когда-либо читал.
Как и большинство фреймворков JavaScript, React имеет свои собственные библиотеки и модули, которые облегчают его создание, такие как react-router-dom и styled-components.
Моя любимая библиотека - это стилизованные компоненты. CSS - адский язык, и я имею в виду, что он может мучить вас, когда вы не совсем понимаете базовые концепции, такие как блочная модель или блочные и встроенные элементы. Когда у вас есть файл CSS с сотнями строк, это также может стать ошеломляющим. Styled-components - идеальный способ организовать вашу укладку.
Хотя я люблю стилизацию в React, мне также нравится, что он связывает воедино некоторые концепции, которые были туманными в моей голове. До перехода в React передача значений от функции к функции не была решением, которое я мог бы сформулировать в своей голове самостоятельно. Не знаю, как вы, но я чувствую себя гуру головоломок Art Chung, когда выяснил, как запустить обновление состояния в родительском компоненте или успешно передать свойства дочерним компонентам.
- HOF’s
Говоря о концепциях, которые React привел мне домой - как насчет их HOF? Я выучил HOF точно так же, как выучил троичные.
Я имею в виду, что я посмотрел на них и сначала подумал: «Нет».
Они казались той магией, которую я так часто вижу в Rails и Ruby. Как черные ящики, обнаруженные в высокоуровневых концепциях машинного обучения, таких как нейронные сети.
Я имею в виду, что когда я познакомился с методом .forEach, я взял и написал для циклов еще около двух недель. А потом, однажды в классе, у нас была утренняя зарядка, над которой я и мой лучший друг и одноклассник Суприя позже в тот же день взялись всей командой. Если бы мы могли получить .filter () и .find (), мы бы определенно взялись за .map ().
Но если вы знаете основы, такие как циклы while и for, магия сопоставления и фильтрации станет менее волшебной и более понятной.
Вот в чем дело, я уже сказал, что мне нравится React. И один из основных методов, который используется в каждом приложении React, - это .map ().
По сути, .map () принимает любой массив и выполняет функции (которые вы написали) для каждого элемента указанного массива, возвращая совершенно новый массив элементов.
Например:
У меня есть такая масса прекрасных вещей:
const beautifulThings = ['trees', 'flowers', 'yellow', 'birds']
Я хочу, чтобы каждая красивая вещь знала, что она мне нравится…. Любопытно ... Как мне этого добиться?
const beautifulThings = ['trees', 'flowers', 'yellow', 'birds']
beautifulThings.map((beautifulThing)=>{
return `I love ${beautifulThing}`
})
возвращает:
[ 'I love trees', 'I love flowers', 'I love yellow', 'I love birds' ]
Это не самое практичное использование .map (), но определенно мило !!!
По сути, изучение методов, фреймворков и синтаксиса JS делает меня очень счастливым! Если у вас есть действительно крутые вещи в JS, которые вам нравятся, прокомментируйте и дайте мне знать!
Следуйте за мной на Instagram"!
Фото Жана Алтидора
