Плюсы и минусы реализации javascript serveride? Плагины и расширения для браузера. Нечеткие архитектурные шаблоны

От автора: переход с React на Vue, два года спустя. Выбор новых фреймворков и библиотек — захватывающий, но также стрессовый процесс. Даже после определенного исследования вы никогда не знаете, какие скелеты обнаружите в шкафу.

Мой медовый месяц длится долго. Примерно через 2 года почти ежедневного использования Vue я, наконец, могу написать об этом, имея определенную точку зрения. Рассмотрим свойственные Vue js преимущества, не забудем и про недостатки. ОСТОРОЖНО: Личное мнение.

Хороший

Реактивность

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

Чтобы достичь этой реактивности, Vue добавляет несколько геттеров и сеттеров к каждой переменной в состоянии, чтобы она могла отслеживать изменения и автоматически обновлять DOM (кхе-кхе, this.setState()). Этот подход не является совершенным, как мы увидим позже.

Батареи прилагаются

С Vue нам нет необходимости прибегать к неофициальным пакетам, таким как MobX или React Router, для критических частей приложения. Vue предоставляет Vue Router и Vuex, Redux-подобный реактивный инструмент для управления состояниями. Это отличные библиотеки сами по себе, но тот факт, что они были специально разработаны для Vue, делает их еще лучше.

Скорость

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

HTML-шаблоны

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

Но эй, Vue поддерживает также и JSX.

Другие приятные вещи:

Отдельные файловые компоненты с HTML, CSS и JavaScript.

Легкий. Около 20 КБ (минимизированный + gzip).

Хорошо расширяемый (миксины, плагины и т. д.).

Отличная документация (за некоторыми исключениями, указанными ниже).

Может быть принят постепенно, даже используется как замена jQuery.

Просто начать использовать.

Неоднозначный

Шаблон компонентов

Переход от React к Vue выглядит как глоток свежего воздуха. Больше не существует привязки (this) или setState(). Ура! Но через некоторое время вы начнете подвергать сомнению правильность синтаксиса компонентов Vue. Компоненты Vue создаются с помощью объектов, и вот пример определения функции компонента:

export default { methods: { increment () { this.count++; } } }

export default {

methods : {

increment () {

this . count ++ ;

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

class { increment() { this.state.count++; } }

class {

increment () {

this . state . count ++ ;

Сейчас я говорю не об использовании или не использовании классов, а о том, что Vue использует произвольные структуры объектов вместо языковых функций.

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

Чат-сообщество

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

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

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

Не такой волшебный

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

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

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

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

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

Злой

Нечеткие архитектурные шаблоны

Вот пример: что лучше — обрабатывать запросы API в компонентах или во Vuex? В документации приведены примеры того, как обрабатывать API-логику во Vuex. Есть даже красивая и красочная диаграмма:

Означает ли это, что логика аутентификации также входит во Vuex? Будет ли менеджер состояний начинать перехватывать всю логику приложения?

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

Отвечая на первоначальный вопрос: логика API не должна писаться ни во Vuex, ни в компонентах. Существует даже хороший пример того, как это делается в официальных примерах кода .

Заключение

Все больше людей переходят на Vue, и я сомневаюсь, что эта тенденция скоро прекратится. Он все еще далеко не настолько принят, как React (по крайней мере, за пределами Китая), и постоянно борется за второе место с Angular.

В прошлом я утверждал, что Vue — это прагматичная библиотека, в отличие от React, которая кажется более идеалистической («Мы чистый JavaScript!»). Я все еще думаю, что это хорошая метафора. С другой стороны, теперь я чувствую, что прагматизм-для-всего от Vue нуждается в гораздо большей доводке, элегантности и простоте на уровне пользователя.

За 2 года мой опыт работы с Vue был положительным. Я все еще уверен, что это было хорошим решением перевести мою команду с React на Vue. Не потому, что Vue лучше, а потому, что он лучше подходит для нас.

Vue, конечно же, выполняет задачи, для которых он предназначен, и преуспевает в тех областях, где другие терпят неудачу, но сегодня я не думаю, что Vue объективно лучше или хуже других возможных вариантов. Вот и все.

Я только начал экспериментировать с Aptana Jaxer на стороне сервера javascript для моего следующего проекта. И у меня мало вопросов о том, что

    Используя сервер JS на стороне сервера, мы можем реализовать все веб-приложение без использования каких-либо серверных языков (например, С#, java и т.д.). Или серверная сторона JS находится между веб-сервером и другим стеком langauge.

    Это действительно лучший подход?

    Каковы преимущества и неудобства?

    Как это хорошо работает с точки зрения производительности?

    Есть ли какая-либо реализация в реальном времени (общедоступные веб-сайты) только с использованием JS на стороне сервера (никаких других языков)?

    Каковы альтернативы, доступные для Aptana jaxer (с открытым исходным кодом)?

    Насколько хорошо мы можем реализовать транзакции и транзакции maitain db? можем ли мы сделать это на серверах JS..?

    Можно ли создавать службы RESTFul и SOAP на серверах JS..?

Я знаю, что это слишком долго (и наивные вопросы). Я просто надеюсь, что кто-то уже наткнулся на все это при внедрении serveride JS.

вот что я намерен спросить.

Действительно ли это лучший подход, чем использование серверных языков (предположим С#), как мы можем сравнить это с реализацией С# на веб-сайте (производительность, языковые функции)? И какой из них лучше подходит, используя только JS на серверах или JS в среднем слое между другим языковым стеком и веб-сервером?

3 ответов

    Инструменты . Статически типизированные языки, такие как С# и Java, имеют отличные инструменты для разработки и разработки. Динамические языки, такие как JS, пока не имеют поддержки инструмента. Лично я считаю, что для этого важно значительное сокращение кода шаблона и суетливого типа, но это все еще большой недостаток, если вы много занимались разработкой в ​​среде IDE. Если вы используете IDE, рассмотрите возможность использования jedit для динамических языков

    Зрелость/стандартизация : Serverside JS по-прежнему является новой парадигмой, и есть много игроков и нет четких победителей. ECMA не имеет стандартов для серверных JS. Как упоминалось в ответе Брэндона, группа CommonJS пытается сформировать стандартное JS-серверы, а Myna имеет экспериментальную поддержку CommonJS через Narwhal

В исходной вычислительной скорости несколько динамических языков могут соответствовать статически типизированным скомпилированным языкам, таким как С# и Java. Сказав это, это действительно не имеет значения. Любая часть вашего приложения, интенсивно использующая вычислительные ресурсы, должна, вероятно, быть написана на Java или использовать существующую библиотеку Java. Я бы не предложил, чтобы кто-нибудь написал базу данных в JS, например. Для реальных веб-приложений/SOA-сервисов основной причиной замедлений является не сырая вычислительная скорость, это неэффективный код, особенно доступ к базе данных. Myna помогает в этом, делая такие вещи, как:

  • внутреннее кэширование скомпилированных JS-скриптов
  • Внутреннее использование кэшированных подготовленных операторов транзакций базы данных
  • Кэширование фрагментов запроса и вывода
  • Пул соединений с базами данных
  • Автоматическая поддержка хэша ETag
  • Инструменты профилирования

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

Если вы имеете в виду "какая поддержка базы данных имеет серверная сторона JS?" то ответ зависит от платформы. Платформа Myna предоставляет следующие функции базы данных:

  • Приложение для веб-администрирования, где вы можете определить "источники данных", то есть информацию о подключении к базе данных. Затем вы можете запросить эти источники данных по имени. Myna включает драйверы JDBC для H2, MySQL, Microsoft SQL Server и Postgresql, но можно использовать любой источник данных JDBC или ODBC
  • Myna.Database и Myna.Table обеспечить доступ к базе данных без метаданных, а также создание и изменение таблиц.
  • Myna Query объект поддерживает maxRows, пейджинг, параметры SQL, настраиваемые обработчики строк, запрос запроса, кеширование и многое другое
  • Myna DataManager объект поддерживает создание объекта ORM.

возможно создание служб RESTFul и SOAP на серверах JS..

Поддержка REST и SOAP - это специфичные для платформы функции. Myna WebService поддерживает следующие протоколы:

  • XML-RPC
  • JSON-RPC
  • Ext Direct
  • JSON-Майна (простой протокол, который использует обычные сообщения в форме и возвращает JSON. Прост в использовании из браузера)

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

Отладка

Традиционная отладка точек останова - это реальный вызов serveride. Хотя Rhino поддерживает отладчик-крючки, использование этих средств из веб-приложения без состояния будет довольно привлекательным. Лично я даже не использую отладчики точки останова, даже когда они доступны (например, firebug). Вместо этого я предпочитаю вести журнал.

Myna.log(type,label,detail)

создаст поток с низким приоритетом для записи сообщения журнала HTML в базу данных регистрации Myna. Затем эти журналы можно найти через администратора Myna. Журналы также записывают временные метки и истекшие миллисекунды для профилирования. Myna.dump(obj) также может использоваться для представления представления таблицы HTML любого объекта. Myna также регистрирует все не обработанные исключения со стековыми трассировками, контекстом исходного кода и запросами. Между dump(), log() и обработчиком ошибок по умолчанию у меня не так много проблем с отладкой Myna code

Используя JS на стороне сервера, мы можем реализовать все веб-приложение без использования каких-либо серверных языков (например, С#, java и т.д.).

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

Действительно ли это лучший подход?

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

Если вы хотите получить лучшее из того и другого, вы можете использовать JavaScript как язык сценариев, встроенный в ваше приложение. Rhino для Java и JScript.NET упрощают манипулирование "родными" объектами в JavaScript. Например, вы можете написать свои классы домена в Java или С# и script с помощью JavaScript, где вы хотите больше гибкости. Если вам достаточно удобно работать с JavaScript, писать на одном языке может быть проще, но.

Я никогда не писал "реальное" серверное приложение с использованием JavaScript, поэтому я не могу судить о том, лучше ли он или хуже.NET(я также никогда не использовал JScript.NET). Я играл с несколькими фреймворками для удовольствия, хотя и сейчас я переписываю свой личный сайт с помощью Helma NG. До сих пор это был хороший опыт (намного лучше, чем PHP, который мне никогда не нравился).

Каковы преимущества и недостатки?

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

Недостатки:

  • Многие фреймворки являются экспериментальными/не очень зрелыми.
  • Вам нужно программировать на JavaScript (если вам не нравится этот язык).

как это работает с точки зрения производительности?

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

Существует ли реализация реального времени (общедоступные веб-сайты) только с использованием JS на стороне сервера (нет других языков)?

Я не знаю каких-либо крупных сайтов с использованием JavaScript, но может быть и некоторые.

какие альтернативы доступны для Aptana jaxer (с открытым исходным кодом)

В качестве предисловия я использую SSJS на моей дневной работе. Мы запускаем достаточно большой (с точки зрения сложности, а также просмотра страниц) веб-сайт на SpiderMonkey. Я добавлю к Матфею отличный ответ, где у меня есть опыт.

Действительно ли это лучший подход, чем использование серверных языков (предположим С#)

"Лучше" действительно зависит от того, что вы хотите с ним делать. Сам JavaScript обладает некоторыми замечательными функциями, а также довольно ужасными. Если вы серьезно относитесь к разработке JS (клиент или сервер), я не могу рекомендовать достаточно высоко, чтобы вы смотрели презентацию Дугласа Крокфорда, Javascript: The Good Parts если вы еще этого не сделали. Он проделал фантастическую работу по сортировке крутизны, и он отличный оратор для загрузки.

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

Тем не менее, обратите внимание на группу CommonJS . Они работают над определением этих точных вещей. Кроме того, в документации Jaxer Api перечислены встроенные модули, которые включены в эту структуру.

как это работает с точки зрения производительности?

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

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

насколько хорошо мы можем внедрять и поддерживать транзакции db? можем ли мы сделать это на сервере JS..?

У Jaxer есть API-интерфейсы баз данных MySQL и SQLite. Как отметил Матфей, ​​если вы используете Rhino, вы можете использовать JDBC api.

Теперь с синтаксисом покончено, давайте наконец перейдём к самому интересному: изучению преимуществ и недостатков использования статических типов.

Преимущество № 1: Вы можете заблаговременно находить баги и ошибки

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

Небольшой пример: предположим, что у нас небольшая функция, которая берёт радиус и вычисляет площадь:

Const calculateArea = (radius) => 3.14 * radius * radius; var area = calculateArea(3); // 28.26
Теперь если мы захотим передать функции радиус, который не является числом (типа «злоумышленник»)…

Var area = calculateArea("im evil"); // NaN
Нам вернётся NaN . Если какая-то функциональность основана на том, что функция calculateArea всегда возвращает число, то это приведёт к уязвимости или сбою. Не очень приятно, правда?

Если бы мы использовали статические типы, то определили бы конкретный тип передаваемых параметров и возвращаемых значений для этой функции:

Const calculateArea = (radius: number): number => 3.14 * radius * radius;
Попробуйте теперь передать что-нибудь кроме числа функции calculateArea - и Flow вернёт удобное и симпатичное сообщение:

CalculateArea("Im evil"); ^^^^^^^^^^^^^^^^^^^^^^^^^ function call calculateArea("Im evil"); ^^^^^^^^^ string. This type is incompatible with const calculateArea = (radius: number): number => 3.14 * radius * radius; ^^^^^^ number
Теперь у нас есть гарантия, что функция будет принимать только валидные числа на входе и возвращать результат только в виде валидных чисел.

Поскольку контролёр типов сообщает вам об ошибках прямо во время написания кода, это намного удобнее (и намного дешевле), чем поиск бага после того, как код отправлен заказчику.

Преимущество № 2: У вас появляется живая документация

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

Чтобы понять каким образом, посмотрим на метод, который я однажды нашла в большой кодовой базе, с которой работала:

Function calculatePayoutDate(quote, amount, paymentMethod) { let payoutDate; /* business logic */ return payoutDate; }
На первый взгляд (и на второй, и на третий), совершенно непонятно, как использовать эту функцию.

Является ли quote числом? Или логическим значением? Платёжный метод - это объект? Или это может быть строка, которая представляет тип платёжного метода? Возвращает ли функция дату в строковом виде? Или это объект Date ?

Без понятия.

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

С другой стороны, если бы написали что-то вроде такого:

Function calculatePayoutDate(quote: boolean, amount: number, paymentMethod: string): Date { let payoutDate; /* business logic */ return payoutDate; }
то немедленно стало бы ясно, какой тип данных функция принимает, а какой тип возвращает. Это пример того, как можно использовать статические типы для сообщения того, что функция намерена делать. Мы можем сообщить другим разработчикам, чего ожидаем от них, и можем увидеть, чего они ожидают от нас. Следующий раз, если кто-то соберётся использовать эту функцию, вопросов не возникнет.

Можно поспорить, что эта проблема решается добавлением комментариев к коду или документации:

/* @function Determines the payout date for a purchase @param {boolean} quote - Is this for a price quote? @param {boolean} amount - Purchase amount @param {string} paymentMethod - Type of payment method used for this purchase */ function calculatePayoutDate(quote, amount, paymentMethod) { let payoutDate; /* .... Business logic .... */ return payoutDate; };
Это работает. Но здесь гораздо больше слов. Кроме многословности, такие комментарии в коде трудно поддерживать, потому что они ненадёжные и не имеют структуры - некоторые разработчики пишут хорошие комментарии, а другие могут написать что-то непонятное, а некоторые вообще могут забыть оставить комментарий.

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

Преимущество № 3: Устраняется обработка запутанных ошибок

Типы помогают устранить обработку в коде запутанных ошибок. Давайте вернёмся к нашей функции calculateArea и посмотрим, каким образом это происходит.

На этот раз я передам ей массив радиусов для вычисления площадей для каждого радиуса:

Const calculateAreas = (radii) => { var areas = ; for (let i = 0; i < radii.length; i++) { areas[i] = PI * (radii[i] * radii[i]); } return areas; };
Эта функция работает, но неправильно обрабатывает некорректные входные аргументы. Если мы захотим убедиться, что функция правильно обрабатывает ситуации, когда входные аргументы не являются валидными массивами чисел, то придём к функции примерно такого вида:

Const calculateAreas = (radii) => < radii.length; i++) { if (typeof radii[i] !== "number") { throw new Error("Array must contain valid numbers only"); } else { areas[i] = 3.14 * (radii[i] * radii[i]); } } return areas; };
Ого. Тут много кода для такого маленького кусочка функциональности.

А со статическими типами мы просто напишем:

): Array => < radii.length; i++) { areas[i] = 3.14 * (radii[i] * radii[i]); } return areas; };
Теперь функция действительно выглядит так, как она выглядела перед добавлением всего визуального мусора из-за обработки ошибок.

Легко понять преимущества статических типов, правда?

Преимущество № 4: Вы можете увереннее осуществлять рефакторинг

Объясню это историей из жизни. Однажды я работала с очень большой кодовой базой, и нужно было обновить метод, установленный в классе User . В частности, изменить один из параметров функции со string на object .

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

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

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

Преимущество № 5: Разделение данных и поведения

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

Ещё раз посмотрим на нашу функцию calculateArea со статическими типами:

Const calculateAreas = (radii: Array): Array => { var areas = ; for (var i = 0; i < radii.length; i++) { areas[i] = 3.14 * (radii[i] * radii[i]); } return areas; };
Подумайте, как бы мы подошли к составлению этой функции. Поскольку мы указываем типы данных, то вынуждены в первую очередь думать о типах данных, которые собираемся использовать, чтобы можно было соответствующим образом установить типы для передаваемых параметров и возвращаемых значений.

Только после этого мы реализуем логику:

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

Преимущество № 6: Устранение целой категории багов

Ошибки типов во время выполнения программы - одна из самых распространённых ошибок или багов, с которыми сталкиваются JavaScript-разработчики.

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

Var appState = { isFetching: false, messages: , };
И предположим, что затем мы делаем вызов API, чтобы забрать сообщения и заполнить наш appState . Далее, у нашего приложения есть чрезмерно упрощённый компонент для просмотра, который забирает messages (указанные в состоянии выше) и отображает количество непрочитанных сообщений и каждое сообщение как элемент списка:

Import Message from "./Message"; const MyComponent = ({ messages }) => { return (

{ messages.map(message => )}
); };
Если вызов API для забора сообщений не сработал или вернул undefined , то вы столкнётесь с ошибкой типа в продакшне:

TypeError: Cannot read property ‘length’ of undefined
…и ваша программа завершится со сбоем. Вы потеряете клиента. Занавес.

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

Type AppState = { isFetching: boolean, messages: ?Array }; var appState: AppState = { isFetching: false, messages: null, };
Поскольку известно, что API для забора сообщений работают ненадёжно, то укажем для значения messages тип maybe для массива строк.

Так же как в прошлый раз, мы забираем сообщения через ненадёжный API и используем их в компоненте просмотра:

Import Message from "./Message"; const MyComponent = ({ messages }) => { return (

You have { messages.length } unread messages

{ messages.map(message => )}
); };
Но в этот момент Flow обнаружит ошибку и пожалуется:

^^^^^^ property `length`. Property cannot be accessed on possibly null value

You have {messages.length} unread messages

^^^^^^^^ null

You have {messages.length} unread messages

^^^^^^ property `length`. Property cannot be accessed on possibly undefined value

You have {messages.length} unread messages

^^^^^^^^ undefined { messages.map(message => )} ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ call of method `map`. Method cannot be called on possibly null value { messages.map(message => )} ^^^^^^^^ null { messages.map(message => )} ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ call of method `map`. Method cannot be called on possibly undefined value { messages.map(message => )} ^^^^^^^^ undefined
Погоди, приятель!

Поскольку мы определили messages как тип maybe , мы разрешаем ему быть null или undefined . Но это не даёт нам права проводить операции с ним (вроде.length или.map) без осуществления проверки на null , потому что если значение messages на самом деле null или undefined , то выскочит ошибка типа при попытке проведения операции с ним.

Так что вернёмся и обновим нашу функцию для просмотра примерно таким образом:

Const MyComponent = ({ messages, isFetching }: AppState) => { if (isFetching) { return } else if (messages === null || messages === undefined) { return

Failed to load messages. Try again.
} else { return (

You have { messages.length } unread messages

{ messages.map(message => )}
); } };
Теперь Flow знает, что мы учли все ситуации, где messages равно null или undefined , так что проверка типов кода завершается с 0 ошибок. Прощайте, ошибки во время выполнения программы!

Преимущество № 7: Уменьшение количества юнит-тестов

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

Например, вернёмся к нашей функции calculateAreas с динамическими типами и обработкой ошибок.

Const calculateAreas = (radii) => { // Handle undefined or null input if (!radii) { throw new Error("Argument is missing"); } // Handle non-array inputs if (!Array.isArray(radii)) { throw new Error("Argument must be an array"); } var areas = ; for (var i = 0; i < radii.length; i++) { if (typeof radii[i] !== "number") { throw new Error("Array must contain valid numbers only"); } else { areas[i] = 3.14 * (radii[i] * radii[i]); } } return areas; };
Если бы мы были прилежными программистами, то могли бы подумать о тестировании недействительных передаваемых параметров для проверки, что они корректно обрабатываются нашей программой:

It("should not work - case 1", () => { expect(() => calculateAreas()).to.throw(Error); }); it("should not work - case 2", () => { expect(() => calculateAreas(undefined).to.throw(Error); }); it("should not work - case 2", () => { expect(() => calculateAreas("hello")).to.throw(Error); });
… и так далее. Но очень вероятно, что мы забудем протестировать какие-то граничные случаи, - и наш заказчик будет тем, кто обнаружит проблему. :(

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

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

Const calculateAreas = (radii: Array): Array => { var areas = ; for (var i = 0; i < radii.length; i++) { areas[i] = 3.14 * (radii[i] * radii[i]); } return areas; };
… мы не только получаем гарантию, что наша цель соответствует реальности, но такие тесты попросту надёжнее. В отличие от тестов на эмпирической основе, типы универсальны и их труднее обойти.

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

Преимущество № 8: Инструмент моделирования предметной области

Один из моих любимых примеров использования статичных типов - моделирование предметной области (domain modeling). В этом случае создаётся модель, которая включает в себя и данные, и поведение программы на этих данных. В данном случае лучше всего понять на примере, как использовать типы.

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

Итак, сначала применим псевдонимы типов для трёх платёжных методов:

Type Paypal = { id: number, type: "Paypal" }; type CreditCard = { id: number, type: "CreditCard" }; type Bank = { id: number, type: "Bank" };
Теперь можно установить тип PaymentMethod как непересекающееся множество с тремя случаями:

Type PaymentMethod = Paypal | CreditCard | Bank;
Теперь составим модель состояния нашего приложения. Чтобы не усложнять, предположим, что данные приложения состоят только из платёжных методов, доступных пользователю.

Type Model = { paymentMethods: Array };
Это приемлемо? Ну, мы знаем, что для получения платёжных методов пользователя нужно сделать запрос к API и, в зависимости от результата и этапа процесса, приложение может принимать разные состояния. В реальности, возможно четыре состояния:

1) Мы не получили платёжные методы.
2) Мы в процессе получения платёжных методов.
3) Мы успешно получили платёжные методы.
4) Мы попытались получить платёжные методы, но возникла ошибка.

Но наш простой тип Model с paymentMethods не покрывает все эти случаи. Вместо этого он предполагает, что paymentMethods всегда существует.

Хм-м-м. Существует ли способ составить модель, чтобы состояние приложения принимало одно из этих четырёх значений, и только их? Давайте посмотрим:

Type AppState = { type: "NotFetched" } | { type: "Fetching" } | { type: "Failure", error: E } | { type: "Success", paymentMethods: Array };
Мы использовали тип непересекающегося множества для установки AppState в одно из четырёх состояний, описанных выше. Заметьте, как я использую свойство type для определения, в каком из четырёх состояний находится приложение. Именно это свойство type и является тем, что создаёт непересекающееся множество. Используя его мы можем осуществить анализ и определить, когда у нас есть платёжные методы, а когда нет.

Вы также заметите, что я передаю параметризованный тип E и D в состояние приложения. Тип D будет представлять собой платёжный метод пользователя (PaymentMethod , определённый выше). Мы не установили тип E , который будет нашим типом для ошибки, так что сделаем это сейчас:

Type HttpError = { id: string, message: string };
Теперь можно смоделировать предметную область приложения:

Type Model = AppState;
В целом, подпись для состояния приложения теперь AppState , где E имеет форму HttpError , а D - это PaymentMethod . И у AppState есть четыре (и только эти четыре) возможных состояния: NotFetched , Fetching , Failure и Success .

Такие модели предметной области мне кажутся полезными для размышлений и разработки пользовательских интерфейсов в соответствии с определёнными бизнес-правилами. Бизнес-правила говорят нам, что приложение может быть только в одном из этих состояний, и это позволяет нам явно представить AppState и гарантировать, что оно будет только в одном из этих заранее установленных состояний. И когда мы разрабатываем по этой модели (например, создаём компонент для просмотра), становится абсолютно очевидно, что нужно обработать все четыре возможных состояния.

Более того, код документирует сам себя - достаточно посмотреть на непересекающиеся множества, и немедленно становится понятно, как структурирован AppState.

Недостатки использования статических типов

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

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

Вот некоторые из этих соображений:

Недостаток № 1: Статические типы требуют предварительного изучения

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

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

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

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

Недостаток № 2: Можно увязнуть в многословии

Из-за статических типов программы часто выглядят более многословными и загромождёнными.

Например, вместо этого:

Async function amountExceedsPurchaseLimit(amount, getPurchaseLimit){ var limit = await getPurchaseLimit(); return limit > amount; }
Нам приходится писать:

Async function amountExceedsPurchaseLimit(amount: number, getPurchaseLimit: () => Promise): Promise { var limit = await getPurchaseLimit(); return limit > amount; }
А вместо этого:

Var user = { id: 123456, name: "Preethi", city: "San Francisco", };
Приходится писать такое:

Type User = { id: number, name: string, city: string, }; var user: User = { id: 123456, name: "Preethi", city: "San Francisco", };
Очевидно, что добавляются лишние строки кода. Но есть парочка аргументов против того, чтобы считать это недостатком.

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

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

Сложно сказать, является ли многословность реальным аргументом против типов, но стóит держать его в уме.

Недостаток № 3: Требуется время для достижения мастерства в использовании типов

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

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

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

Недостаток № 4: Статические типы могут задержать быструю разработку

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

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

Дело не только в этом. Контролёры статических типов тоже не всегда идеальны. Иногда возникает ситуация, когда вы знаете что делать, а проверка типов вмешивается и мешает.

Уверена, что я упустила какие-то ещё недостатки, но это самые важные для меня.

Нужно использовать статические типы в JavaScript или нет?


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

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

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

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

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

  1. Программа критически важна для вашего бизнеса.
  2. Программа, вероятно, подвергнется рефакторингу, в соответствии с новыми потребностями.
  3. Программа сложна и имеет много подвижных частей.
  4. Программу поддерживает большая группа разработчиков, которым нужно быстро и точно понять код.
С другой стороны, я бы отказалась от статических типов в следующих условиях:
  1. Код недолговечный и не является критически важным.
  2. Вы делаете прототип и стараетесь продвигаться как можно быстрее.
  3. Программа маленькая и/или простая.
  4. Вы единственный разработчик.
Преимущество разработки на JavaScript в наши дни состоит в том, что благодаря инструментам вроде Flow и TypeScript у нас наконец-то появился выбор - использовать статические типы или старый добрый JavaScript.

Заключение

Надеюсь, эти статьи помогли вам понять важность типов, как их использовать и, самое главное, *когда* их использовать.

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

24.11.14 15.6K

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

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

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

Общая информация

Многие люди, даже не имеющие никакого отношения к IT-сфере, слышали слово Java . Революционный независимый от платформ язык, на котором активно пишут приложения для мобильных систем. Он был разработан перспективной компанией Sun , которая затем перешла «под крыло » Oracle . Но ни та, ни другая компании не имеют никакого отношения к JavaScript :

От Sun потребовалось лишь разрешение на использование части названия. Удивительно, но JavaScript вообще не принадлежит ни одной фирме.

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

  • Объектно-ориентированность. Выполнение программы представляет собой взаимодействие объектов;
  • Приведение типов данных проводится автоматически;
  • Функции выступают объектами базового класса. Эта особенность делает JavaScript похожим на многие функциональные языки программирования, такие как Lisp и Haskell ;
  • Автоматическая очистка памяти. Так называемая, сборка мусора делает JavaScript похожим на C# или Java .

Если говорить о сути применения JavaScript , то этот язык позволяет «оживлять » неподвижные страницы сайтов с помощью кода, который можно запустить на исполнение (так называемые, скрипты ). То есть, можно провести аналогию с мультфильмами, где html и css – это прорисованные герои, а JavaScript – это то, что заставляет их двигаться.

Если говорить о синтаксисе JavaScript , то ему присущи следующие особенности:

  • Регистр важен. Функции с названиями func() и Func() – совершенно разные;
  • После операторов необходимо ставить точку с запятой;
  • Встроенные объекты и операции;
  • Пробелы не учитываются. Можно использовать сколько угодно отступов, а также переводов строки, чтобы оформить свой код.

Простейший код на JavaScript выглядит следующим образом:

Сфера применения

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

  • Разработка веб-приложений. Хотите установить простой счетчик, организовать передачу данных между формами или поместить на своем сайте игру? Тогда JavaScript выступит верным помощником в этом деле;
  • «Активное участие» в AJAX . Эта технология позволила значительно ускорить работу приложений, осуществляя обмен данными с сервером в «фоновом » режиме:

  • Операционные системы. Возможно, кто-то не знал, но Windows , Linux и Mac имеют своих браузерных конкурентов, львиная доля кода которых написана на JavaScript ;
  • Мобильные приложения;
  • Сфера обучения. Любая программистская специальность в университете включает в себя изучение JavaScript в том или ином объеме. Это обусловлено тем, что язык изначально разрабатывался для не очень сильных программистов. Уроки JavaScript логически вплетаются в базовый курс HTML , поэтому освоение проходит достаточно просто.

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

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

  • Необходимость обеспечивать кроссбраузерность. Раз уж JavaScript выступает как интернет-технология, то приходится мириться с правилами, которые устанавливает всемирная паутина. Код должен корректно выполняться во всех, или хотя бы самых популярных, браузерах;
  • Система наследования в языке вызывает трудности в понимании происходящего. В JavaScript реализовано наследование, основанное на прототипах. Люди, изучавшие другие объектно-ориентированные языки программирования, привыкли к привычному «класс потомок наследует родительский класс ». Но в JavaScript такими вещами занимаются непосредственно объекты, а это не укладывается в голове;
  • Отсутствует стандартная библиотека. JavaScript не предоставляет никаких возможностей для работы с файлами, потоками ввода-вывода и прочими полезными вещами;
  • Синтаксис в целом затрудняет понимание. Красота кода – явно не конёк JavaScript , но главное правило программистов соблюдено: «Работает? Не трожь! ».

Теперь стоит отметить некоторые преимущества

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

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

Для тех, кто хочет изучать

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

  • Прежде всего, HTML . Нельзя начинать делать что-либо для интернета без основы основ. Каскадные таблицы стилей (CSS ) также очень сильно пригодятся;
  • Использовать новую литературу. Программирование – это не физика, законы которой нерушимы, а новые учебные пособия – это урезанные старые. IT-технологии постоянно развиваются, и не стоит пренебрегать полезными обновлениями;
  • Стараться самостоятельно писать все участки программы. Если что-то ну совсем не получается – можно позаимствовать чужой код, но лишь предварительно уяснив для себя каждую строчку;
  • Отладка – ваш верный друг. Быстро находить ошибки – один из важнейших моментов в программировании;
  • Не игнорируйте нормы форматирования. Конечно, код не станет лучше или хуже от разного количества отступов и пробелов, но легкость чтения и понимания программистом – тоже немаловажный момент. Код, приведенный ниже? очень трудно воспринимается, особенно если вы не его

  • Имена переменных должны иметь лексическое значение. В процессе написания простых программ это кажется вовсе не важным, но когда количество строк кода переваливает за тысячу – все черти ломают ноги;

Веб-разработка

Vue.JS: особенности, преимущества и недостатки

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

Введение

Реализация web UI сталкивается со все более сложными задачами, требующими использования все более сложных инструментов. Добавим сюда тренд ухода от MVC архитектуры приложений и получим довольно интересную тенденцию. Современные разработчики стремятся использовать отдельные библиотеки под каждый слой задач. На фоне этих изменений появился и стал завоевывать популярность фреймворк Vue.JS.

Чисто теоретически он является альтернативой jQuery. Но в реальности Vue.JS довольно успешно конкурирует с React.JS — очевидным лидером в области View. Из современных популярных технологий, решающих схожие задачи можно также выделить Angular и Ember. У каждой из них есть свои преимущества и недостатки. Однако все эти фреймворки можно привести к одному общему знаменателю — относительная сложность освоения.

Особенности Vue.JS

Vue.JS создавался с оглядкой на лучшие практики перечисленных технологий. Из React.JS команда Vue позаимствовала идею виртуального DOM. Этот подход исключает прямое взаимодействие с узлами интерфейса. Изначальная работа ведется с его легковесной копией (virtual DOM). И только после этого изменения применяются к реальным узлам интерфейса. Параллельно происходит сравнение реального DOM дерева и его виртуальной копии. Таким образом выявляется разница и перерисовывается только то, что претерпело изменения.

Из Angular Vue.JS позаимствовал two-way data binding. Это позволяет проектировать интерфейсы: во-первых, декларативно; во-вторых, с использованием Vue в шаблонизаторах. Таких как Haml или Pug. Правда, отметим, что такой подход практиковался и раньше. Например, во фреймворке Knockout.JS.

Ядро Vue.JS, подобно React, содержит лишь необходимый функционал для работы с интерфейсом. Поэтому оно компактно, легко интегрируется с другими технологиями, в том числе с jQuery и даже может использоваться вместо него (для разработки простых интерфейсов).

Кроме того, Vue доступен ряд подключаемых модулей, реализующих современный подход к разработке веб-приложений. О чем речь? К примеру, практически все React приложения проектируются в тандеме с технологией контроля состояний Redux, которая является отдельной библиотекой и реализует flux-архитектуру. Подход, практикуемый библиотекой Redux оказался довольно удобным и успешным. Поэтому для Vue.JS была разработана своя технология контроля состояния приложения — Vuex. Vuex полностью заимствует идеи Redux, но степень интеграции этой библиотеки с Vue гораздо выше, чем в случае React и Redux. А это трансформируется в быстродействие и удобство.

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

Опыт использования на реальном проекте

Перед нами стояла задача разработки интерфейса, содержащего на одной странице карту, фильтры, результаты фильтрации и ряд элементов взаимодействия. Мы прекрасно понимали, что использование простого Vanilla JavaScript или jQuery может обернуться сложностями в разработке. Почему не React.js? Потому что Vue.JS проще и легковеснее. Зачем связываться с более “тяжелым” фреймворком для разработки одного-единственного интерфейса?

Мы уже давно присматривались к Vue.JS и понимали, что его преимущества могут дать нам реальный профит. В результате было принято принципиальное решение “прощупать” эту технологию на практике.

Вот небольшой пример инициализации Vue приложения.

В app.js создается переменная app как Vue объект. Конструктор проходится по шаблону template.haml и производит необходимые связывания.

Декларативность в Vue настолько проста, что это позволило нам интегрировать его в монолитное веб-приложение, использующее шаблонизатор Haml.

Здесь в зависимости от правдивости флага ‘filtersOpen’ к элементу добавляется или удаляется класс ‘rentbuy__filters—open’

Vue.JS помимо того, что реализует все современные подходы в разработке web UI, является невероятно легким в освоении, гибким и высоко интегрируемым со сторонними технологиями фреймворком. Шаблонизация Vue дала нам возможность связать элементы полей фильтра с полями одного-единственного объекта. А это позволило всегда иметь под рукой актуальные опции выбора, облегчило валидацию и очистку фильтра.

Здесь значения полей ввода привязываются к полям объекта ‘data’ с помощью двустороннего связывания. Это приводит к изменению поля объекта при изменении значения в поле ввода и наоборот.

Благодаря реактивности Vue.JS, мы избавились от дублирования кода. Как это произошло? В целом ряде случаев набор полей фильтра частично совпадал (в зависимости от состояния приложения). Возникла реальная угроза массового дублирования кода. Однако с помощью простых предикатов, определенных в шаблоне, можно быстро и удобно переключаться между наборами полей.

Здесь блок с полем для ввода виден на странице, когда выполняется условие

Также благодаря гибкости Vue.JS, нам удалось использовать преимущества компонентной разработки в элементах списка результатов фильтрации. Как вы помните, наш фреймворк практикует технологию виртуального DOM. Соответственно, с приходом новых результатов актуальные компоненты просто не перерисовываются. Что выливается в быстродействие и комфорт для пользователей.

Элементы из массива ‘properties’ рендерятся в виде Vue компонента ‘proposal’. Набор элементов на странице изменяется автоматически, согласно изменениям в массиве. Компонент ‘proposal’ представляет собой обыкновенный HTML шаблон, код которого заключен в тег script с типом ‘text/x-template’

Еще отметим, что Vue отслеживает жизненный цикл компонентов. То есть к ним можно применять какие-либо методы (изменение, удаление и т.д.) после инициализации и присоединения к DOM дереву. В частности, мы можем легко инициализировать приложение при загрузке страницы в браузере. Например, запросить начальную выборку элементов, в зависимости от текущего размера карты на странице пользователя.

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

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

Изучив ключевые особенности технологии и опробовав их на практике, мы можем перечислить основные преимущества фреймворка Vue:

  • Библиотека довольно проста и функциональна. Для того чтобы разобраться в ней, нужен минимальный багаж знаний.
  • Требования к стеку отсутствуют, поэтому Vue.JS можно использовать на любом проекте.
  • Фреймворк совсем немного весит. Мы экономим время загрузки страниц и получаем целую кучу плюшек: плюс к конверсии, плюс к UX, плюс к поисковому ранжированию и т.д.
  • Довольно высокая скорость разработки. Благодаря использованию любых шаблонов и доступности документации, большинство возникающих проблем решаются довольно быстро. В том числе по сравнению с React, так как в большинстве приложений, не имеющих сложных интерфейсов, вся мощь этого фреймворка является немного избыточной.
  • Возможность найти и подключить к проекту практически любого разработчика, кто хоть немного знаком с фронтенд разработкой. Низкий порог вхождения позволяет работать с фреймворком, как фронтендщикам, так и бэкэндщикам.

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

Недостатки Vue.JS

Есть и минусы. В частности, по сравнению с React.JS.

  • Работа над состоянием приложения происходит “под капотом”. В масштабных проектах это может вылиться в неочевидность работы компонентов, что зачастую создает проблемы с отладкой и эффективной разработкой.
  • Компонентный подход во Vue.JS не так гибок и очевиден, как в React.
  • Система рендеринга React более функциональна. Она предоставляет больше возможностей для отладки.
  • Шаблонизация React значительно гибче (JS vs DSL).

Вывод

Vue.JS реализует все современные подходы к разработке web UI и является легким в освоении, гибким и высоко интегрируемым со сторонними технологиями фреймворком. Безусловно, в плане создания сложных интерфейсов (например, для корпоративных сайтов) React его превосходит. Но для решения относительно простых задач использование Vue выглядит не только оправданным, но и предпочтительным.

Статью подготовил

Отдел веб-разработки

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