Зачем javascript

Как и зачем учить JavaScript

Рассказываем, зачем нужен JS и с чего начать его изучение.

Зачем учить JavaScript

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

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

Программист, который этим занимается, называется frontend-разработчик (или frontend developer). От него зависит, какой страницу увидит в браузере пользователь. Специалист, который создает сервер сайта и продумывает его логику — backend-разработчик. Программисты, пишущий на JavaScript, могут быть и фронтендерами, и бэкендерами (хотя первые встречаются гораздо чаще).

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

Кроме сайтов, на JS пишут мобильные приложения, игры и — частично — некоторые компьютерные программы (например, браузер Mozilla Firefox), а также программное обеспечение для оборудования и бытовой техники. По оценке экспертов, в ближайшее время популярность этого языка будет только расти.

Как и где изучать

Для изучения JS, как и любого другого языка программирования, есть 3 пути:

1. Самостоятельное изучение. Долго и не очень оправданно для новичков в программировании. Тем, кто уже знаком с другими языками, будет проще.
2. Университет или колледж. Не так много учебных заведений в странах СНГ предлагают это направление (а еще меньше — на хорошем и глубоком уровне), так что это скорее исключение, чем правило.
3. Курсы. Самый распространенный вариант. Его бесспорный плюс — преподаватель, который поможет и объяснит трудные моменты, подскажет, на что обратить внимание, поделится опытом. Выбирайте курсы, которые ведут практикующие разработчики, и не позволяйте маркетологам себя обмануть: даже самый талантливый преподаватель не сможет научить программированию за месяц.

Самостоятельное изучение

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

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

Начать следует, естественно, с основ. Вот несколько полезных онлайн-ресурсов:

• Codecademy: Learn JavaScript;
• SnoopCode: JavaScript Tutorials;
• MDN’s JavaScript Guide.

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

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

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

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

Полифилы JavaScript: что это и зачем они нужны?

Всем привет, я — Кирилл Мыльников, frontend разработчик компании Usetech.

Сегодня хочу рассказать о полифилах JavaScript: что это и зачем они нужны? На практике мы реализуем несколько полифилов: map, forEach, filter, reduce.

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

Итак, начнём с определения полифила, а затем перейдём к методам.

Что такое полифил?

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

Как я писал выше, сегодня мы будем реализовывать несколько полифилов: map, forEach, filter, reduce.

Метод map

Метод map вызывает функцию для каждого элемента и возвращает новый массив. Аргумент функции принимает три значения:

1. Элемент массива;
2. Индекс данного элемента;
3. Сам массив.

Реализуем полифил на примере:

Array.prototype.myMap = function (callback, arg) < if (this == null || this === window) < throw TypeError('myMap called on null or undefined') >if (typeof callback !== 'function') < throw TypeError(`is not a function`) > const newArray = []; for (let i = 0; i < this.length; i++) < newArray[i] = callback.call(arg, this[i], i, this) >return newArray; >

А теперь поэтапно разберём, что тут происходит. Сначала нам нужно обработать возникающие ошибки:

1. Функцию обратного вызова могут не передать;
2. Данный метод вызывается не для массива.

this === null || this === window , условие сработает в том случае, если метод вызывается как отдельная функция.

Пример:

const myMap = Array.prototype.myMap;

Внутри функции myMap this уже будет как global, не в строгом режиме будет window, в строгом undefined. Для этого кейса мы выкидываем ошибку.

Также функцию обратного вызова могут не передать, и на этот случай мы делаем проверку на typeof callback === ‘function’

Наша функция принимает второй аргумент arg. Для чего это нужно? Если наша функция обратного вызова должна быть вызвана в контексте, для внутреннего callback должно быть установлено значение arg. Это можно сделать с помощью call() .

Вот таким простым способом мы с вами реализовали полифил метода map. Теперь перейдём к следующему методу.

Метод forEach

При реализации следующего полифила метода forEach нужно учесть несколько моментов:

1. Он используется только для перебора и ничего не возвращает;
2. Изменяет оригинальный массив.

Реализация полифила будет очень похожа на метод map. Посмотрим на примере:

Array.prototype.myForEach = function (callback, arg) < if (this == null || this === window) throw TypeError('myForEach called on null or undefined'); if (typeof callback !== 'function') throw TypeError(`$is not a function`); for (let i = 0; i < this.length; i++) < callback.call(arg, this[i], i, this); >>;

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

Метод filter

Этот метод возвращает новый массив всех подходящих элементов. Посмотрим пример:

Array.prototype.myfilter = function (callback, arg) < if (this == null || this === window) throw TypeError('myfilter called on null or undefined'); if (typeof callback !== 'function') throw TypeError(`$is not a function`); const newArr = []; for (let i = 0; i < this.length; i++) < if (callback.call(arg, this[i], i, this)) newArr.push(this[i]); >return newArr; >;

Как вы видите, в этом случае присутствует обработка ошибок, как и у всех.

Единственное, что поменялось, это то, что мы написали проверку, удовлетворяющую условию, перед тем как добавить в массив и вернуть его.

Перейдём к последнему методу — reduce.

Метод reduce

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

1. previousValue — результат предыдущего вызова;
2. item — элемент массива;
3. index — индекс данного элемента;
4. array — сам массив.

Теперь перейдём к реализации полифила reduce:

Array.prototype.myReduce = function (callback, initValue) < if (this === null || this === window) throw TypeError('myReduce called on null or undefined'); if (typeof callback !== 'function') throw TypeError(`$is not a function`); let previousValue = initValue; let startIndex = 0; if (initValue === null) < previousValue = this[0]; startIndex = 1; >if (previousValue == null) throw TypeError('Reduce of empty array with no initial value'); for (let index = startIndex; index < this.length; index++) < previousValue = callback(previousValue, this[index], index, this); >return previousValue; >;

Первые две проверки я уже описывал выше. Но появилась новая проверка: если previousValue будет undefined, если массив пуст и не указан initialValue, то тоже выдаём ошибку.

Второй аргумент reduce initialValue необязательный, и он используется для инициализации previousValue. Если он не указан, то мы инициализируем первый элемент массива, и начинаем обход со второго элемента.

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

• Блог компании Usetech
• JavaScript

Зачем javascript

Мобильные приложения

JavaScript хорошо прижился и в среде мобильной разработки. Доля рынка гибридных приложений, где в облегченном браузере (WebView) отрабатывает JavaScript, последние два года растет. По данным опроса Ionic за 2017 год, 32,7% разработчиков в ближайшие два года полностью откажутся от разработки нативных приложений в пользу гибридных. Вдобавок, два года назад 20% опрошенных программистов использовали нативные языки и инструменты Android и iOS, но к прошлому году эта цифра упала всего до 2,9%.

Такие тенденции имеют простое объяснение. При гибридном подходе, один раз написав код, можно получить приложение стабильно работающее на большинстве популярных платформ (iOS, Android). Хотя некоторые доработки все же потребуются, такой подход более универсален, чем разработка нативных приложений под разные платформы.

Альтернативой гибридным приложениям выступает фреймворк React Native, разработанный Facebook. Он позволяет использовать JavaScript и для разработки нативных Android- и iOS-приложений. Хотя можно работать с «родными» Java и Kotlin для разработки под Android и Objective-C и Swift, если нужно приложение для iOS.

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

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

С другой стороны, использование родных для iOS или Android языков, также имеет свои преимущества. В нативной среде разработки есть прямой доступ ко всем API и функциональности платформы без дополнительных ограничений или зависимостей. Android Studio или xCode также дают возможность использовать множество сторонних библиотек, а все доступные языки являются строго типизированными, что приводит к меньшему количеству ошибок. Наконец, в долгосрочной перспективе лучше все-таки использовать родной язык и среду разработки.

Python, например, хорош тем, что это основной язык для аналитики данных, big data и научного сообщества, что дает большое преимущество в интеграции различных систем. Ruby on Rails — гибкий и удобный, имеет согласованную структуру и методологию, а логику приложения легко выразить интуитивно. Но в сравнении с Node.js он фантастически медленный.

Большой плюс Node.js — скорость разработки и низкий порог вхождения. Если вы работали с RoR, то начать писать на Express.js под Node совсем не трудно. Node.js, среди прочего, позволяет использовать один язык как со стороны клиента, так и сервера. Это серьезно изменило рынок разработки и превратило единичных Full-Stack разработчиков в достаточно многочисленный вид.

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

В первой области специализации — front-end-разработке — JavaScript стал единственным и неоспоримым лидером. Именно он превратил веб-страницы в динамичные, постоянно изменяющиеся ресурсы.

Для чего Back-end разработчику учить JavaScript

Меня зовут Алексей Голубев. Я Lead Software Engineer в GlobalLogic. В общей сложности в IT работаю более 6 лет. Занимался pentesting, разработкой desktop, web, mobile. Стек: .NET, C#, JavaScript. Начинал с back-end, позже стал делать и client-части приложений.

Сегодня хочу поговорить о том, для чего бэкенд-специалисту может пригодиться JS в контексте разработки клиентской части. Под JavaScript я буду подразумевать и TypeScript, и Flow. Речь, конечно, не о полном отказе от бэкенд-обязанностей, а о расширении компетенции в сторону клиентской части, ведь JS — это почти синоним браузерного клиента.

Back-end специалистов, которые все же решились перейти на темную сторону и изучить клиентский стек, или разработчиков, которые освоили back и начали выполнять любые задачи на проекте, называют Full Stack.

И тут становится очевидно, что с размазыванием компетенции может упасть качество кода Back-end разработчика, ведь если где-то прибыло, то значит, где-то убыло. Однако есть несколько моментов:

• А есть ли на ваших проектах такие задачи, которые реально требуют узкой компетенции? Ведь большинство проектов — это типичный CRUD, а многие вещи, например авторизация, уже даются в готовом виде.
• А точно ли убывают старые знания, если прибудут новые? Конечно, бывают сложности в работе, когда долго что-то не практикуешь. Но так будет со всем, даже внутри библиотек самого back-end. Тут без разницы, учить новый JS-фреймворк или новый web-движок.
• А точно ли современные технологии так сложны в освоении с такой кучей мануалов, видеокурсов, статей и обучающих сайтов?

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

А теперь о языке и бенефитах

JavaScript — это уникальный язык. У других языков нет такого огромного комьюнити, нет столько хейтеров и почитателей, нет такой распространенности. Стоит посмотреть топы GitHub trends или статистику по самому GitHub, чтобы увидеть тенденцию: JavaScript развивается. Более половины разработчиков пишут на JS, по данным Stack Overflow.

Для JS больше всего написано пакетов и готовых библиотек. Каждый год ему придумывают альтернативу. Но эти альтернативы либо в итоге компилируются в JS, либо в WebAssembly, который на продакшене видели единицы.

Пожалуй, лучшая попытка, заслуживающая внимания — это TypeScript, который имеет синтаксис JS + типы и компилируется в JS.

Рок-н-ролл мертв, а JS еще нет. И, судя по всему, все у него будет хорошо, чего нельзя сказать о других языках.

Так зачем же пополнять ряды всех этих «несчастных» за счет бэкендеров?

Оперирование фичами вместо тасок. Обычно, когда приходит большая фича, она делится на front- и back-части. Владея JS, Back-end Developer может взять на себя все обязанности и делить задачу по своему усмотрению. Это удобно и ускоряет процесс, так как исчезает дополнительное согласование API и поведения. Один разработчик может деливерит большой кусок функционала и быть ответственным/ответсвенной за него.

Универсальность. Мы работаем на результат, который достигается всей командой. Но иногда в команде бывают проблемы со смещением нагрузки с back на front и наоборот. Зная JS, Back-end Developer может маневрировать и перетягивать на себя часть задач с фронта. Гибкость, особенно в условиях аутсорса, — это очень важное качество.

Архитектура. Дело в том, что сам по себе back-end не существует в вакууме. Являясь обычно server, он взаимодействует с client, который, в свою очередь, может быть и мобильным приложением, и веб-страницей, и десктопом. Таким образом, понимание всех плюсов и минусов клиента поможет в формировании архитектуры приложения.

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

Попробовать что-то новое. Про количество npm-пакетов ходит много шуток. И у Back-end разработчика/разработчицы есть огромные возможности не сидеть на старом заезженном стеке, а попробовать что-то новое. Ведь наш back-end довольно консервативная штука в отличие от front-end, этим стоит пользоваться.

А есть ли минусы?

Минусы есть, для кого-то они вполне существенные.

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

Нехватка узкой компетенции. Специалистом быть во всем не получиться, это логично. Пока на проекте мы не сильно углубляемся в кастомизацию, все будет идти хорошо. Но иногда выходит так, что надо обеспечить высокую отказоустойчивость на большой нагрузке или нарисовать сложную анимацию. И тогда придется тяжко, особенно с эстимейтами. С другой стороны, даже в обычной команде, где есть четкое разделение по back- и front-разработчикам/разработчицам, не факт, что найдутся нужные специалисты. Тем не менее я рекомендую привлекать консультантов со стороны, если есть такая возможность.

Например, часто возникают проблемы с сервисами в AWS, Azure или настройкой того же SonarQube. В таких случаях можно поискать экспертов внутри компании или аккаунта. Главное — не забывать, что настроить следует самому/самой, а эксперт нужен для совета, тогда это будет максимально продуктивно.

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

Например, постоянный холивар хранить авторизационные данные в cookie или в localStorage (спойлер — в cookie безопасней), чтобы было удобней оперировать и бэкенду, и фронту.

С чего начать?

Сперва стоит найти несколько составляющих.

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

Время. В идеале пройти курс по JS/TS и интересующему фреймворку. Подойдут Udemy и Coursera из платных, Metanit, learn.javascript из бесплатных. Я бы не рекомендовал браться за фреймворк без изучения азов языка и синтаксиса ES5/6. Будет не лишним знать TypeScript, так как все больше компаний переходят на него в связке с тем же React. Все зависит от проекта, к которому вы готовитесь.

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

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

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

Что в итоге?

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

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

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

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

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

Все про українське ІТ в телеграмі — підписуйтеся на канал DOU

�� Подобається Сподобалось 1

До обраного В обраному 3