Javascript плюсы и минусы: JavaScript — лучший язык программирования для начинающих. Так это или нет?

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


Шёл 2007 год. Отличное издательство технических книг O’Reilly Media обратилось ко мне, предложив одну идею. Они спросили меня о том, хотел бы я написать книгу о JavaScript, которая предназначалась бы для абсолютных новичков в программировании. «С какой стати?», — тут же задал я встречный вопрос.

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

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


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

Нет нужды говорить, что тогда я книгу о JavaScript не написал. Я продолжал заниматься серверным программированием и писать о моих любимых технологиях (как правило, о языке С# и о .NET Framework). Прошло много лет.

Затем произошло нечто странное.

JavaScript буквально «взлетел».

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

Содержание

Потрясающая распространённость JavaScript — его главное преимущество


Одним из уникальных преимуществ JavaScript является его распространённость.

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

JavaScript, благодаря его распространённости, не обязательно быть самым лучшим языком программирования. Ему всего лишь нужно быть достаточно хорошим языком.

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

Предположим, вы разрабатываете замечательное приложение, которое, задавая пользователю вопросы, определяет его личностный профиль. Настроить среду разработки довольно просто. Но что произойдёт, когда вы захотите отправить свою программу товарищу? Понадобится ли ему устанавливать у себя среду времени выполнения или воссоздавать ту же среду разработки, что и у вас? Нужно ли будет «подкрутить» настройки безопасности его компьютера прежде чем он сможет загрузить и установить вашу программу? Может быть, ваш товарищ использует операционную систему, которая попросту не поддерживает вашу программу, или мобильную платформу, на которую, если не вдаваться в детали, можно устанавливать только профессиональные приложения, распространяемые через iTunes или Google Play? Если же вы, для разработки программы, используете JavaScript, а для её распространения — простой веб-сайт (например, GitHub позволяет бесплатно создавать подобные сайты), то все эти проблемы попросту исчезнут.

А если наш будущий программист — ребёнок, то вот вам неопровержимый факт: дети и браузеры очень сильно связаны. Если вы наблюдали за ребёнком, который работает на компьютере (не на мобильном устройстве), то вы, возможно, заметили, что он как минимум 98% времени тратит на работу с браузером. Дети играют в браузерные игры, используют социальные сети, занимаются школьными делами в Google Classroom и Google Docs. И если код, который пишут дети, будет работать в родном для них браузерном мире, это будет совершенно естественно.

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

Недостатки JavaScript


Как насчёт проблем JavaScript? У этого языка есть серьёзные недостатки, его причуды, противоречия и ограничения могут быть крайне неприятными для того, кто только начинает изучать программирование. К счастью, существуют современные решения, которые могут сгладить большинство недостатков JavaScript.

Разберём четыре основные претензии, предъявляемые к этому языку.

▍1. Проблема работы с типами данных в JavaScript


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

Вот пример кода, который обречён на провал:

var myNumber = 100;
myNumber = myNumbr + 1;

Увидели ошибку? Во второй строке, на самом деле, используются две переменных: переменная
myNumber
, которая была объявлена в первой строке, и некая фиктивная переменная myNumbr. Мы знаем о том, что вторая переменная — это результат опечатки, но JavaScript сообщит нам об этом только во время выполнения программы, выдав сообщение об ошибке, которое выглядит как ReferenceError: myNumbr is not defined. То же самое происходит и в том случае, если при записи имени переменной перепутали большие и маленькие буквы (например, переменная из myNumber случайно превратилась в MyNumber). Проблема, но уже другого характера, может возникнуть и в том случае, если вы, считая, что некая переменная хранит число, прибавляете к ней другое число, а эта переменная, на самом деле, содержала строку или что-нибудь другое. JavaScript в таком случае не сообщит об ошибке, но результат вычислений будет совсем не таким, какого можно ожидать от сложения двух чисел. Каждый JavaScript-разработчик может вспомнить неприятную историю такого рода, когда путаница с типами вызывала странные ошибки в программах.

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

Один из моих любимых редакторов кода, который подходит и для изучения программирования, и для профессионального использования — это Visual Studio Code. Он бесплатен, нетребователен к ресурсам, его код открыт, его можно практически до бесконечности расширять. Одна из его самых замечательных возможностей заключается в поддержке организации проверки JavaScript-кода на наличие в нём распространённых проблем средствами TypeScript. Включить такую проверку можно, воспользовавшись соответствующим конфигурационный файлом или вставив следующий комментарий в верхнюю часть JavaScript-файла:

// @ts-check

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

Если добавить в начало этого файла комментарий // @ts-check, то VS Code выделит строки кода, которые содержат потенциальные ошибки.


Выделенные строки кода

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


Объяснение проблемы

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

▍2. JavaScript не поддерживает ООП


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

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

К счастью, существуют красивые решения, обеспечивающие поддержку ООП в JavaScript. Моё любимое решение такого рода — это TypeScript — опенсорсный проект, запущенный Microsoft в 2012 году. TypeScript представляет собой нечто вроде улучшенной разновидности JavaScript, которая поддерживает ООП (а также многие другие полезные возможности вроде строгой проверки типов).

Кто-то может сказать, что мы говорим о JavaScript, и что TypeScript — это, всё же, не JavaScript. И, на самом деле, это так. Но вот одна интересная деталь. Код пишут на TypeScript, а затем конвертируют его в JavaScript перед тем, как он будет выполняться. Это позволяет пользоваться всем лучшим из миров TypeScript и JavaScript. Если вы выберете TypeScript, то у вас будет современный язык программирования, на котором вы сможете писать свой код, и та широчайшая поддержка, которой пользуется обычный JavaScript.

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

Не верите? Тогда подумайте о том, что некоторые из самых современных инновационных настольных приложений используют комбинацию из TypeScript и Electron — фреймворка, который позволяет выполнять JavaScript-код за пределами традиционного браузера (хотя надо отметить, что Electron пользуется браузерными возможностями). Один из наиболее впечатляющих примеров подобного приложения — это редактор VS Code. Получается, что тот самый инструмент, с помощью которого очень удобно писать JavaScript-код, сам написан на JavaScript. Правда, если говорить точнее, то VS Code написан на TypeScript, но код, написанный на этом языке, всё равно, преобразуется в JavaScript-код.

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

▍3. Вокруг полно некачественного JavaScript-кода


Что тут сказать. Некачественный код можно написать на любом языке программирования. Слышали когда-нибудь про Visual Basic?

▍4. Для JavaScript-разработки нужны дополнительные библиотеки и фреймворки


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

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

Каким бы печальным всё это ни было, эти проблемы, на самом деле, не влияют на новичков. Если некто изучает программирование с использованием JavaScript, то ему лучше всего держаться в стороне от фреймворков и библиотек, идёт ли речь о чём-то широко известном, вроде jQuery, Angular, React или Vue, или о чём-то изобретённом в тот момент, когда было написано это предложение, или в ту секунду, когда была опубликована эта статья. Конечно, новичок, хорошо освоив фундаментальные вещи, вероятно, захочет ознакомиться, как минимум, с одним из популярных дополнительных инструментов. Но это — уже совсем другая история.

Итоги


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

Уважаемые читатели! Согласны ли вы с тем, что JavaScript — это, в современных условиях, самый лучший язык для обучения программированию? Если не согласны — тогда, может быть, вы знаете какой-нибудь язык, который лучше подойдёт для этой цели?

Недостатки javascript / Песочница / Хабр

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

Но язык не лишен недостатков. Наиболее значимые из них:

  1. Язык компилируется в момент исполнения кода. Каждый раз, когда вы открываете сайт, javascript код начинает компилироваться. Как минимум увеличивается время выполнения программы.
  2. Отсутствует типизация данных. Проблема всех скриптовых языков. Пока выполнение кода не дойдет до нужной строчки, не узнаешь работает ли она. А ведь значительную часть по поиску ошибок мог бы взять на себя компилятор, если бы знал типы данных, с которыми он работает. Да и по скорости выполнения, типизированный код быстрее.
  3. Не привычная для многих программистов объектная модель. Классы и наследование классов присутствует, но оно сильно отличается от привычной многим реализаций в языках программирования C++/C#/Java.

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

Какие есть пути решения? Отказаться от использолвания javascript? Google, например, уже придумала замену — язык google dart. А как быть с уже написанным кодом? Годы полезной работы наших замечательных программистов?

Не все так печально.

  1. Проблему с типизаций позволяет решить удивительное ПО от google — closure compiler. Необходимо в коде рядом с переменными, функциями и параметрами функций добавлять специальным образом оформленные комментарии — аннотации, в которых указаны типы данных. И умное ПО от google подскажет вам, где вы совершили ошибку.

    Официальная документация: developers.google.com/closure/compiler/docs/js-for-compiler?hl=ru

  2. Компилировать код на данный момент нельзя. Но можно уменьшить объем кода, сжав его как логически (переименовав переменные, убрав лишние пробелы, преобразовав код и т.д.), так и при помощи алгоритмов сжатия (например, gzip). Здесь же есть простор для браузеров. Браузеры могут компилировать код только при первой загрузку с сайта, и уже откомпилированный код запоминать. И при следующем запуске использовать уже откомпилированный код. Производительность железа тоже не отстает, сейчас уже даже телефон может не уступать по производительности простенькому настольным компьютеру.
  3. Избавиться от «корявой» объектной модели позволяет сам язык javascript. Имеются замечательные инструменты:

    Mootools: mootools.net
    AWeb library: a-web.me

    Описание классов внешне приближается к описанию классов на языке C++/C#/Java. Это действительно удобно как для понимания, так и для сопровождения кода. Второй инструмент привносит полноценные public, protected и private методы, добавляет полноценные свойства классов. Все просто и изящно.

Все недостатки языка javascript устранимы. Его смело можно использовать в масштабных проектах. Замена языку пока не нужна.

Когда JavaScript-фреймворк не нужен / Хабр


Фото — Maria Teneva, площадка Unsplash

Иногда React, Angular, Vue.js и т. д. — это лишнее

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

Вернемся в эпоху jQuery


Помните, было время, когда JQuery использовали для всего! JQuery то, jQuery сё — повсюду легкий аромат jQuery. На любом веб-сайте и в каждом веб-приложении — jQuery.

В чем причина популярности этой библиотеки?

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

Но пришло спасение — библиотека jQuery избавила сообщество JavaScript от этой головной боли. Правда, большинство из нас в результате стали лениться, поскольку перестали понимать, что происходит «под капотом».

Я прозрел, когда появился этот сайт.

Эпоха чрезмерно большого выбора в мире JavaScript


Начинается 2020 год, и у наших сайтов и веб-приложений определенно есть «лишний вес». К нашим услугам Angular, React, Vue.js, Svelte, Polymer (и это далеко не всё) — но необходимость постоянно делать выбор в стремительно разрастающемся зоопарке фреймворков утомляет.

Вы можете подумать: «Говори лучше за себя». Но именно это я сейчас и делаю: я критически оцениваю собственную «усталость» от изобилия в мире JavaScript.

Скажем честно: никогда еще не было так просто сделать веб-сайт или веб-приложение. Сегодня достаточно одной команды: ng new ИмяПроекта
в Angular, в случае React и т. д.

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

Потому что — а вдруг сочетания HTML, CSS и JavaScript окажется достаточно?

И говоря о JavaScript-фреймворках, я имею в виду и библиотеки JavaScript: Angular, React, Vue.js и Svelte — всё это вместе (и многое другое).

Плюсы и минусы использования JavaScript-фреймворков


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

На основной работе я использую Angular, но люблю поэкспериментировать с React и Vue.js, а иногда пробую какую-нибудь небольшую микробиблиотеку JavaScript, которая делает что-то одно, но зато очень хорошо.

Когда использовать JavaScript-фреймворк не нужно


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

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

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

Когда JavaScript-фреймворк — это разумный выбор


Часто использование JavaScript-фреймворка будет обосновано — но даже в этих случаях нельзя терять бдительности.

1. У вас большое приложение


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

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

2. Вы (или компания) цените открытый исходный код


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

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

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

3. Быстрая разработка новых функций


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

Заключение


В этой статье преимуществ использования JavaScript-фреймворков оказалось больше, чем недостатков. (Если у вас есть что добавить — поделитесь в комментариях!)

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

Всегда задавайтесь вопросом: «Нужен ли здесь этот фреймворк? Может, лучше сделать всё своими руками или использовать что-то готовое?»

«Как применение фреймворка отразится на пользователях? Будет ли приложение на низкопроизводительном телефоне таким же удобным в использовании, как на флагманском устройстве?»

Почему JavaScript работает быстрее, чем С++? / Хабр

Да, вы не ослышались. Глючный, тупой, тормознутый JavaScript работает быстрее, чем С++. Подождите тянуться к return userKarmaVote(), дайте мне возможность всё объяснить. Адвокат!

Есть три вида лжи


Есть такой проект под названием Benchmarks Game. Ребята написали программы (обход бинарных деревьев, n-body и т.д.) на всех популярных языках программирования и разработали методику измерения скорости и потребления памяти. Прежде чем читать дальше, просьба ознакомиться с методологией измерений.
Реализация каждого алгоритма подробно описана (например, nbody). Это open-source и если вы считаете, что какой-то алгоритм реализован не самым оптимальным способом, то можете предложить собственное решение.

Из всех интерпретируемых языков JavaScipt работает быстрее других. Он в пять раз быстрее, чем Python и Ruby (в том числе JRuby).

На сегодняшний день JavaScript — это самый быстрый интерпретируемый язык в мире.
Возвращаясь к C++. По алгоритму regexdna JavaScipt отрабатывает чуть быстрее, чем C++. При этом нагружает CPU в два раза меньше, хотя и потребляет в два раза больше памяти.
По другим алгоритмам JavaScript, естественно, отрабатывает медленнее C++, но учитывая что они изначально в разных весовых категориях (компилируемый язык со статической типизацией против интерпретируемого языка с динамической), разница не такая уж большая.

Почему JavaScript такой быстрый?


Интерпретаторы для Python/Ruby были написаны ограниченным числом людей. Эти люди, возможно, безумно талантливы, но на стадии разработки у них не было никакой конкуренции. Они конкурировали только с собой, со своими представлениями о скорости и качестве. Интерпретатор же для JS родился в конкурентной борьбе лучших умов мира. Mozilla разработала SpiderMonkey, Google разработал V8, Microsoft открыли Chakra. Все они работали в жесточайшей конкурентной борьбе.

Когда у команды NodeJS встал вопрос о выборе движка для JS, они просто посмотрели бенчмарки, увидели что V8 намного быстрее и выбрали его. Если завтра Chakra от Microsoft будет работать быстрее Google V8, то не будет никакой проблемы перейти на него.

Почему JavaScript такой медленный?


Как было сказано выше, JavaScript как язык — быстрый. Однако считается, что «нативное» предназначение JS — манипуляции с DOM. На самом деле это уже давно не так и JS успешно используется на сервере, в мобильных устройствах и даже в микроконтроллерах. Но речь не об этом. Речь о том, что когда вы с помощью JavaScript работаете с DOM, то тормозит не JS, а DOM. Есть много причин, почему DOM такой медленный, но я позволю себе сузить фокус только на одной причине. Проблема в самой спецификации HTML. В разделе 1.1.1 The DOM Structure Model есть следующий абзац:
…objects in the DOM are live; that is, changes to the underlying document structure are reflected in all relevant NodeList and NamedNodeMap objects…

Смысл в том, что объекты в дереве DOM — «живые». Это означает, что при любом изменении любой части DOM эти изменения отражаются в каждом объекте DOM.
Крупные кампании, такие как Flipboard, упорно боролись с лагами DOM. В итоге у них ничего не получилось и они смогли добиться 60 FPS только заменив DOM на Canvas. JavaScript никуда не делся, а лаги пропали. По этой же причине Netflix отказались от DOM на своих TV-приставках, а Реакту пришлось придумывать свой «виртуальный DOM».

Еще раз: JavaScript на клиенте не лагает. Лагает медленный DOM (точнее манипуляции с DOM). Не важно чем вы будете менять DOM — джава-скриптом или ассемблером. DOM все равно будет притормаживать. Именно из-за тормознутости DOM, JavaScript стал считаться медленным языком. Это историческая несправедливость и от нее давно пора избавиться.

WebAssembly


В этой связи у многих существуют неоправданные ожидания от прихода WebAssembly. Дескать, придет WebAssembly порядок наведет и мы наконец-то откажемся от «тормознутого» JS. Во-первых, даже после прихода WebAssembly работа с DOM останется за JavaScript. Да, какие-нибудь фреймворки (типа AngularJS) получат возможность перенести тяжелую логику на C/C++, но суммарный прирост от этого будет минимальным. Во-вторых, когда WebAssembly сможет напрямую манипулировать DOM'ом, минуя JS, прироста по скорости не будет, т.к. тормозит DOM, а не JS.

Хейт


Я понимаю, что скорость работы — не главный критерий оценки языка. Нужно учитывать потребление памяти, нагрузку на CPU и т.д. Я понимаю, что одно дело — скорость работы каких-то академических алгоритмов, а другое дело — скорость работы настоящего продакшн-приложения. Я понимаю, что кроме алгоритмов есть еще паттерны и подходы, и что ваш асинхронный ASP.NET может работать быстрее асинхронного NodeJS.

Однако JavaScript уже достаточно подвергся нападкам (заслуженным и незаслуженным) за свое «странное» поведение, за свое отношение к типам, к наследованию и т.д. Но вешать на него еще и ярлык тормознутости — это перебор. Остановитесь!

Нужны ли JavaScript фреймворки для разработки приложений: преимущества и недостатки

Нужны ли нам все еще JavaScript-фреймворки?

От автора: как веб-разработчик, я стараюсь регулярно оценивать свой инструментарий и определять, могу ли я обойтись без того или иного инструмента. Недавно я исследовал, насколько легко разрабатывать сложные приложения без front-end фреймворка JavaScript.

Что такое JavaScript-фреймворк?

В общем, JavaScript-фреймворк — это инструмент, который вы можете использовать для разработки современных веб-приложений, особенно SPA.

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

Нужны ли нам все еще JavaScript-фреймворки?

Популярные на сегодняшний день фреймворки имеют несколько основных общих черт. Большинство интегрированных сред / библиотек, от Vue до React, предоставляют некоторую комбинацию следующего:

Нужны ли нам все еще JavaScript-фреймворки?

Бесплатный курс «NodeJS. Быстрый старт»

Изучите курс и узнайте, как создать веб-приложение с нуля на JavaScript с NodeJS

Получить курс

Синхронизация состояния и представления

Маршрутизация

Система шаблонов

Многоразовые компоненты

Фреймворки все еще необходимы?

Это зависит от. Многие утверждают, что front-end фреймворки не нужны и никогда не были нужны. Другие — что это очень полезные инструменты. Итак, вопрос в том, являются ли фреймворки jQuery сегодняшнего дня? Будут ли они решать важные проблемы?

Трудно сказать, но прогресс нативного JS, спецификации веб-компонентов и легко настраиваемые инструменты сборки сделали разработку SPA без фреймворка простой, как никогда ранее.

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

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

Обзор

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

Нужны ли нам все еще JavaScript-фреймворки?

Главный экран

Нужны ли нам все еще JavaScript-фреймворки?

Экран создания рецепта

Компоненты

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

Вы также можете использовать хуки жизненного цикла, такие как connectedCallback, disconnectedCallback, attributeChangedCallback.

import template from './recipe.html' import DATA_SERVICE from '../../utils/data' export default class Recipe extends HTMLElement { constructor () { // прилагаем shadow DOM, инициализруем закрытое свойство recipe и инициализируем сервис данных super() this._shadowRoot = this.attachShadow({ mode: 'open' }) this._recipe = null this.ds = new DATA_SERVICE() } connectedCallback () { // устанавливаем html-контент для ипортируемого шаблона this._shadowRoot.innerHTML = template // прилагаем метод delete для удаления кнопки this._shadowRoot .querySelector('.delete') .addEventListener('click', () => this._delete()) } _render (title) { // устанавливаем заголовок рецепта и текст кнопки "в избранное" this._shadowRoot.querySelector('.recipe-title').innerHTML = title this._shadowRoot.querySelector('.favorite').innerHTML = this._recipe .favorite ? 'Unfavorite' : 'Favorite' } _delete () { // Удаляем рецепт или выводим ошибку try { await this.ds.deleteRecipe(this._recipe.id) } catch (e) { console.error(e) alert( 'Sorry, there was a problem deleting the recipe. Please, try again.' ) } } get recipe () { // геттер для рецептов return this._recipe } set recipe (recipe = {}) { // сеттер для рецептов, который запускает метод render this._recipe = recipe this._render(this._recipe.title) } } window.customElements.define('recipe-item', Recipe)

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

import template from './recipe.html'

import DATA_SERVICE from '../../utils/data'

export default class Recipe extends HTMLElement {

  constructor () {

    // прилагаем shadow DOM, инициализруем закрытое свойство recipe и инициализируем сервис данных

    super()

    this._shadowRoot = this.attachShadow({ mode: 'open' })

    this._recipe = null

    this.ds = new DATA_SERVICE()

  }

  connectedCallback () {

    // устанавливаем html-контент для ипортируемого шаблона

    this._shadowRoot.innerHTML = template

    // прилагаем метод delete для удаления кнопки

    this._shadowRoot

      .querySelector('.delete')

      .addEventListener('click', () => this._delete())

  }

  _render (title) {

    // устанавливаем заголовок рецепта  и текст кнопки "в избранное"

    this._shadowRoot.querySelector('.recipe-title').innerHTML = title

    this._shadowRoot.querySelector('.favorite').innerHTML = this._recipe

      .favorite

      ? 'Unfavorite'

      : 'Favorite'

  }

  _delete () {

    // Удаляем рецепт или выводим ошибку

    try {

      await this.ds.deleteRecipe(this._recipe.id)

    } catch (e) {

      console.error(e)

      alert(

        'Sorry, there was a problem deleting the recipe. Please, try again.'

      )

    }

  }

  get recipe () {

    // геттер для рецептов

    return this._recipe

  }

  set recipe (recipe = {}) {

    // сеттер для рецептов, который запускает метод render

    this._recipe = recipe

    this._render(this._recipe.title)

  }

}

window.customElements.define('recipe-item', Recipe)

Компонент My Recipe Item для отображения рецептов в списке

Маршрутизация

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

Первоначально я использовал npm-пакет под названием Vanilla JS Router. С помощью API истории браузера не так уж и сложно реализовать собственный контент менее чем в 100 строках кода! Примечание: я не реализую действительно сложную логику, такую как гард маршрута.

import './components/error/error' import content404 from './components/404/404.html' import DATA_SERVICE from './utils/data' const ds = new DATA_SERVICE() // получаем элемент, содержащий SP const $el = document.getElementById('app') // определяем маршруты const home = async () => { await import('./components/recipe/recipe') await import('./components/recipe-list/recipe-list') await import('./components/modal/modal.js') $el.innerHTML = `<recipe-list></recipe-list>` } const create = async () => { await import('./components/create-recipe/create-recipe') $el.innerHTML = `<create-recipe></create-recipe>` } const edit = async () => { await import('./components/edit-recipe/edit-recipe') $el.innerHTML = `<edit-recipe></edit-recipe>` } const error404 = async () => { $el.innerHTML = content404 } // сопоставляем маршруты с путями // захватываем рецепт по параметру id для маршрута редактирования const routes = { '/': home, '/create': create, '/error': error404, '/edit': async function (params) { const id = params.get('id') const recipe = await ds.getRecipe(id) await edit() $el.querySelector('edit-recipe').recipe = recipe } } // для состояния pop получаем параметры из url и передаем в маршрут // если таких маршрутов нет, ошибка window.onpopstate = async () => { const url = new URL( window.location.pathname + window.location.search, window.location.origin ) if (routes[window.location.pathname]) { await routes[window.location.pathname](url.searchParams) } else routes['/error']() } // для состояния pop получаем параметры из url и передаем в маршрут // если таких маршрутов нет, ошибка // добавляем маршрут в историю браузера let onNavItemClick = async pathName => { const url = new URL(pathName, window.location.origin) const params = url.searchParams if (routes[url.pathname]) { window.history.pushState({}, pathName, window.location.origin + pathName) await routes[url.pathname](params) } else { window.history.pushState({}, '404', window.location.origin + '/404') routes['/error']() } } // устанавливаем соответствующий маршрут для загрузки / перезагрузки страницы ;(async () => { const url = new URL( window.location.pathname + window.location.search, window.location.origin ) if (routes[window.location.pathname]) { await routes[window.location.pathname](url.searchParams) } else routes['/error']() })() // экспортируем маршрута и метод клика nav const router = { onNavItemClick, routes } export { router }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

import './components/error/error'

import content404 from './components/404/404.html'

import DATA_SERVICE from './utils/data'

const ds = new DATA_SERVICE()

// получаем элемент, содержащий SP

const $el = document.getElementById('app')

// определяем маршруты

const home = async () => {

  await import('./components/recipe/recipe')

  await import('./components/recipe-list/recipe-list')

  await import('./components/modal/modal.js')

  $el.innerHTML = `<recipe-list></recipe-list>`

}

const create = async () => {

  await import('./components/create-recipe/create-recipe')

  $el.innerHTML = `<create-recipe></create-recipe>`

}

const edit = async () => {

  await import('./components/edit-recipe/edit-recipe')

  $el.innerHTML = `<edit-recipe></edit-recipe>`

}

const error404 = async () => {

  $el.innerHTML = content404

}

// сопоставляем маршруты с путями

// захватываем рецепт по параметру id для маршрута редактирования

const routes = {

  '/': home,

  '/create': create,

  '/error': error404,

  '/edit': async function (params) {

    const id = params.get('id')

    const recipe = await ds.getRecipe(id)

    await edit()

    $el.querySelector('edit-recipe').recipe = recipe

  }

}

// для состояния pop получаем параметры из url и передаем в маршрут

// если таких маршрутов нет, ошибка

window.onpopstate = async () => {

  const url = new URL(

    window.location.pathname + window.location.search,

    window.location.origin

  )

  if (routes[window.location.pathname]) {

    await routes[window.location.pathname](url.searchParams)

  } else routes['/error']()

}

// для состояния pop получаем параметры из url и передаем в маршрут

// если таких маршрутов нет, ошибка

// добавляем маршрут в историю браузера

let onNavItemClick = async pathName => {

  const url = new URL(pathName, window.location.origin)

  const params = url.searchParams

  if (routes[url.pathname]) {

    window.history.pushState({}, pathName, window.location.origin + pathName)

    await routes[url.pathname](params)

  } else {

    window.history.pushState({}, '404', window.location.origin + '/404')

    routes['/error']()

  }

}

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

;(async () => {

  const url = new URL(

    window.location.pathname + window.location.search,

    window.location.origin

  )

  if (routes[window.location.pathname]) {

    await routes[window.location.pathname](url.searchParams)

  } else routes['/error']()

})()

// экспортируем маршрута и метод клика nav

const router = {

  onNavItemClick,

  routes

}

export { router }

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

Переосмысление

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

Минусы

Спецификация все еще развивается

Спецификация веб-компонентов является и старой, и новой. Она используется уже намного дольше, чем я первоначально думал. Веб-компоненты были впервые представлены Алексом Расселом на конференции Fronteers 2011. Тем не менее, за последние год или два, их востребованность существенно возросла. Таким образом, в спецификации все еще много неразберихи. Например, импорт HTML является устаревшим, хотя большая часть документации / ресурсов по-прежнему ссылается на него.

Тестирование

Нужны ли нам все еще JavaScript-фреймворки?

Нужны ли нам все еще JavaScript-фреймворки?

Бесплатный курс «NodeJS. Быстрый старт»

Изучите курс и узнайте, как создать веб-приложение с нуля на JavaScript с NodeJS

Получить курс

Существует не так много выделенных ресурсов для тестирования нативных веб-компонентов. Есть несколько многообещающих инструментов, таких как skatejs ssr и web component tester от Polymer. Но эти инструменты на самом деле предназначены для использования с соответствующими библиотеками. Это создает некоторые трудности для их использования с нативными веб-компонентами.

Обнаружение изменений

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

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

Нужны ли нам все еще JavaScript-фреймворки?

Shadow DOM

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

Генерация структур DOM

Часть великолепия фреймворков / библиотек, таких как Angular и React, заключается в том, что они работают со своим DOMain. То есть они отлично справляются с эффективным рендерингом и рендерингом структур в DOM. Из блога Angular University: Angular не генерирует HTML, а затем передает его в браузер для анализа, вместо этого Angular генерирует структуры данных DOM напрямую!

Например, Angular, в отличие от jQuery, визуализирует структуры данных DOM напрямую. То есть, вместо того, чтобы передавать HTML в браузер, он должен быть проанализирован, а затем преобразован в структуры данных DOM. Это более эффективно, так как устраняет этот шаг анализа. Виртуальный DOM также весьма полезен, поскольку он позволяет вам не перерисовывать все каждый раз, когда вам нужно обновить представление.

Плюсы

С другой стороны, есть несколько неоспоримых преимуществ для разработки веб приложений таким образом:

Размер пакета

Конечный продукт может быть (с акцентом на может быть) намного меньше и компактнее, чем что-либо, разработанное с использованием современного фреймворка. Например, финальная сборка моего полнофункционального приложения с рецептами была меньше, чем половина сборки Angular.

Нужны ли нам все еще JavaScript-фреймворки?

Размер пакета Angular

Нужны ли нам все еще JavaScript-фреймворки?

Пакет приложения рецептов

Нужны ли нам все еще JavaScript-фреймворки?

Нужны ли нам все еще JavaScript-фреймворки?

Примечание. Это обновленные оптимизированные размеры пакетов.

Понимание

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

Производительность

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

Похоже, что команды Angular и React знают об этих подводных камнях и предоставляют в качестве средства дальнейшей оптимизации производительности такие вещи, как переопределения методов shouldUpdate и onPush ChangeDetection.

Простота и управление кодом

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

Примечания

У меня был отличный опыт работы с Parcel. Иногда он немного более ограничен, чем Webpack, когда пытается обойти определенные пограничные случаи, но я обнаружил, что утверждение ‘zero config’ по большей части справедливо.
Мне также ясно, что многие называют React «библиотекой», а Vue — «прогрессивным» фреймворком. Хотя я понимаю причины этого, я думаю, что React, Vue и Angular решают во многом те же проблемы. Таким образом, я рассматриваю их все вместе, как «фреймворки».

Почему бы не использовать Stencil or Polymer? Я хотел по возможности избегать использования пакетов, библиотек и фреймворков. И посмотреть, насколько стали хороши веб-стандарты, чтобы соответствовать современным потребностям разработкам (не учитывая инструментов сборки).

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

Подводя итоги

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

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

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

Заключение

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

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

Автор: Luke Joliat

Источник: https://medium.freecodecamp.org/

Редакция: Команда webformyself.

Нужны ли нам все еще JavaScript-фреймворки?

Бесплатный курс «NodeJS. Быстрый старт»

Изучите курс и узнайте, как создать веб-приложение с нуля на JavaScript с NodeJS

Получить курс Нужны ли нам все еще JavaScript-фреймворки?

Хотите узнать, что необходимо для создания сайта?

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

Смотреть видео

React или Angular или Vue.js — что выбрать? / Хабр

Фреймворки JavaScript развиваются очень быстрыми темпами, и это означает, что сегодня мы часто обновляем версии Angular, React и еще одного игрока на этом рынке — Vue.js.

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

Плюсы и минусы Angular

Angular — это супергероическая среда JavaScript MVVM, основанная в 2009 году, которая отлично подходит для создания интерактивных веб-приложений.

Преимущества Angular:

  • Angular используется вместе с Typescript. Он имеет исключительную поддержку для этого.
  • Angular-language-service — обеспечивает интеллектуальные возможности и автозаполнение шаблона HTML-компонента.
  • Новые функции, такие как generation Angular, использующие библиотеки npm из CLI, generation, и разработка компонентов, использующая Angular.
  • Подробная документация, позволяющая разработчику получить всю необходимую информацию, не прибегая к помощи его коллег. Однако это требует больше времени для обучения.
  • Односторонняя привязка данных, которая обеспечивает исключительное поведение приложения, что сводит к минимуму риск возможных ошибок.
  • MVVM (Model-View-ViewModel), которая позволяет разработчикам работать отдельно над одним и тем же разделом приложения, используя один и тот же набор данных.
  • Внедрение зависимостей от компонентов, связанных с модулями и модульностью в целом.
  • Структура и архитектура, специально созданные для большой масштабируемости проекта.

Недостатки Angular:
  • Разнообразие различных структур (Injectables, Components, Pipes, Modules и т. д.) усложняет изучение по сравнению с React и Vue.js, у которых есть только «Component».
  • Относительно медленная производительность, учитывая различные показатели. С другой стороны, это можно легко решить, используя так называемый «ChangeDetectionStrategy», который помогает вручную контролировать процесс рендеринга компонентов.

Компании, использующие Angular: Microsoft, Autodesk, MacDonald’s, UPS, Cisco Solution Partner Program, AT&T, Apple, Adobe, GoPro, ProtonMail, Clarity Design System, Upwork, Freelancer, Udemy, YouTube, Paypal, Nike, Google, Telegram, Weather, iStockphoto, AWS, Crunchbase.
Плюсы и минусы React

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

Преимущества React:

  • Легко изучить, благодаря простому дизайну, использованию JSX (HTML-подобный синтаксис) для шаблонов и очень подробной документации. Разработчики тратят больше времени на написание современного JavaScript и меньше беспокоятся о коде, специфичном для фреймворка.
  • Очень быстрая, благодаря реализации React Virtual DOM и различным оптимизациям рендеринга.
  • Отличная поддержка рендеринга на стороне сервера, что делает его мощной платформой для контент-ориентированных приложений.
  • Первоклассная поддержка Progressive Web App (PWA) благодаря генератору приложений `create-react-app`.
  • Привязка данных является односторонней, что означает меньше нежелательных побочных эффектов.
  • Redux, самая популярная платформа для управления состоянием приложений в React, ее легко учить и использовать.
  • React реализует концепции функционального программирования (FP), создавая простой в тестировании и многократно используемый код.
  • Приложения могут быть созданы с помощью TypeScript или Facebook’s Flow, имеющими встроенную поддержку JSX.
  • Переход между версиями, как правило, очень прост: Facebook предоставляет «кодовые модули» для автоматизации большей части процесса.
  • Навыки, полученные в React, могут быть применены к разработке на React Native.

Недостатки React:
  • React не однозначен и оставляет разработчикам возможность выбирать лучший способ развития. Это может быть решено сильным лидерством проекта и хорошими процессами.
  • Сообщество делится по способам написания CSS в React, которые разделяются на традиционные таблицы стилей (CSS Modules) и CSS-in-JS (т.е. Emotion и Styled Components).
  • React отходит от компонентов на основе классов, что может стать препятствием для разработчиков, которым более комфортно работать с объектно-ориентированным программированием (ООП).
  • Смешивание шаблонов с логикой (JSX) может сбить с толку некоторых разработчиков при первых знакомствах с React.

Компании, использующие React: Facebook, Instagram, Netflix, New York Times, Yahoo, Khan Academy, Whatsapp, Codecademy, Dropbox, Airbnb, Asana, Atlassian, Intercom, Microsoft, Slack, Storybook и многие другие
Плюсы и минусы Vue.js

Vue.js — это JavaScript-фреймворк, основанный в 2013 году, который идеально подходит для создания высокоадаптируемых пользовательских интерфейсов и сложных одностраничных приложений.

Преимущества Vue.js:

  • Усиленный HTML. Это означает, что Vue.js имеет много характеристик схожих с Angular, а это, благодаря использованию различных компонентов, помогает оптимизации HTML- блоков.
  • Подробная документация. Vue.js имеет очень подробную документацию, которая может ускорить процесс обучения для разработчиков и сэкономить много времени на разработку приложения, используя только базовые знания HTML и JavaScript.
  • Адаптивность. Может быть осуществлен быстрый переход от других фреймворков к Vue.js из-за сходства с Angular и React с точки зрения дизайна и архитектуры.
  • Потрясающая интеграция. Vue.js можно использовать как для создания одностраничных приложений, так и для более сложных веб-интерфейсов приложений. Важно, что небольшие интерактивные элементы можно легко интегрировать в существующую инфраструктуру без негативных последствий.
  • Масштабирование. Vue.js может помочь в разработке довольно больших шаблонов многократного использования, которые могут быть сделаны почти за тоже время, что и более простые.
  • Крошечный размер. Vue.js весит около 20 КБ, сохраняя при этом свою скорость и гибкость, что позволяет достичь гораздо лучшей производительности по сравнению с другими платформами.

Недостатки Vue.js:
  • Недостаток ресурсов. Vue.js по-прежнему занимает довольно небольшую долю рынка по сравнению с React или Angular, что означает, что обмен знаниями в этой среде все еще находится на начальной стадии.
  • Риск чрезмерной гибкости. Иногда у Vue.js могут возникнуть проблемы при интеграции в огромные проекты, и пока еще нет опыта возможных решений, но они обязательно появятся в ближайшее время.

Компании, которые используют Vue.js: Xiaomi, Alibaba, WizzAir, EuroNews, Grammarly, Gitlab и Laracasts, Adobe, Behance, Codeship, Reuters.
Заключение

Для опытного разработчика нет существенной разницы в том, какой фреймворк использовать, просто нужно некоторое время, чтобы привыкнуть к новому. В нашей компании мы используем в основном в React и Angular, но Vue.js также на заметке. У каждого фреймворка есть свои плюсы и минусы, а это означает, что при разработке продукта нужно сделать правильный выбор для каждого отдельного случая.

Преимущества и недостатки JavaScript

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

Преимущества JavaScript:

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

Простота: JavaScript относительно прост в освоении и реализации. Он использует модель DOM, которая обеспечивает множество предустановленных функций для различных объектов на страницах, что делает его легким для разработки сценария для решения пользовательской цели.

Универсальность: JavaScript отлично работает с другими языками и может использоваться в самых разных приложениях. В настоящее время существует множество способов использования JavaScript через серверы Node.js. Если вы загрузили node.js с помощью Express, используйте базу данных документов, такую как mongodb, и используйте JavaScript в интерфейсе для клиентов, вы можете создать приложение JavaScript полностью из одного окна вперед, используя только JavaScript.

Недостатки JavaScript:

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

Поддержка браузера: JavaScript иногда интерпретируется по-разному разными браузерами. Различные механизмы компоновки могут отображать JavaScript по-разному, что приводит к несогласованности с точки зрения функциональности и интерфейса. Большая часть JavaScript зависит от манипуляции элементами DOM браузеров. И разные браузеры предоставляют разные типы доступа к объектам, в частности Internet Explorer.

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

Отключить JavaScript: если вы отключите JavaScript в браузере, весь код JavaScript не запущен.

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

Источник: http://net-informations.com/js/iq/advan.htm

плюсов и минусов JavaScript - взвешивайте и выбирайте мудро!

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

У каждого недостатка есть соответствующее преимущество.

- W. Clement Stone

Начнем с простого в изучении DataFlair учебника JavaScript по плюсам и минусам JavaScript.

Pros and cons of JavaScript

Плюсы и минусы JavaScript

Как и у всех других языков программирования, JavaScript также имеет свои преимущества и недостатки, которые мы кратко обсудили ниже -

Преимущества JavaScript

Во-первых, мы обсудим преимущества или преимущества с использованием JavaScript -

1.Скорость

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

2. Простота

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

3. Популярность

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

4. Взаимодействие

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

5.Загрузка сервера

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

6. Богатые интерфейсы

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

7. Расширенная функциональность

Сторонние надстройки, такие как Greasemonkey (расширение Mozilla Firefox) позволяют разработчикам добавлять фрагменты предопределенного кода в свой код, чтобы сэкономить время и деньги. Эти дополнения помогают разработчикам создавать JavaScript-приложений намного быстрее и с большей легкостью, чем другие языки программирования.

8. Универсальность

JavaScript теперь может работать как с интерфейсом, так и с интерфейсом.Во внутренней разработке используется NodeJS, в то время как многие библиотеки помогают в разработке, например AngularJS , ReactJS и т. Д.

9. Меньше накладных расходов

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

Недостатки JavaScript

Теперь, после обсуждения преимуществ использования JavaScript, пришло время взглянуть на некоторые недостатки используя JavaScript, который мы кратко обсудили ниже -

1.Безопасность на стороне клиента

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

2. Поддержка браузера

Браузер по-разному интерпретирует JavaScript в разных браузерах. Таким образом, код должен быть запущен на разных платформах перед публикацией. Старые браузеры не поддерживают некоторые новые функции, и мы должны также проверить их.

3. Отсутствие средства отладки

Хотя некоторые редакторы HTML поддерживают отладку, они не так эффективны, как другие редакторы, такие как редакторы C / C ++. Кроме того, поскольку браузер не отображает никаких ошибок, разработчику трудно обнаружить проблему.

4. Одиночное наследование

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

Подождите! Вы проверили наш самый ведущий блог по архитектуре JavaScript?

5.Вялая побитовая функция

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

6. Остановка рендеринга

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

Резюме

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

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

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

.

Вот некоторые плюсы и минусы JavaScript> Журнал CEOWORLD