Веб-разработчик 2020: за чем следить в новом году?
Специалисты ИТ-компании «ТехЛАБ» рассказывают о самых интересных инструментах, за развитием которых стоит наблюдать в 2020 году.
GraphQL
Павел Якупов, веб-разработчик:
До недавнего времени распространенным стилем программной архитектуры был монолит, в соответствии с которым система структурируется в виде одного исполняемого файла или развертываемого компонента. Примером такого подхода может служить Java-приложение уровня предприятия или, например, приложение с использованием популярных PHP-фреймворков (Laravel, Yii2, Symphony).
Преимущества такого подхода: простота разработки, легкость внесения изменений, простота тестирования и развертывания, легкость масштабирования – можно запустить несколько экземпляров приложения за балансировщиком нагрузки.
Но со временем у этого подхода обнаружился недостаток. У успешных приложений есть склонность вырастать из монолитной архитектуры, значительно увеличивая кодовую базу и сложность. Приложение становится слишком большим для осознания одним разработчиком. Внесение изменений усложняет и без того непростую кодовую базу и делает его менее понятным. Постепенно расходы на поддержку такого проекта растут, время выпуска новых функциональностей увеличивается. Также возникают трудности с масштабированием из-за конфликтов требований к ресурсам разных модулей (одному требуется больше ОЗУ, другому ЦПУ).
Решением проблемы стал новый подход – микросервисы. В последние годы большой популярностью пользуется подход разбиения старых монолитных приложений на микросервисы. Грубо это можно представить как разбиение монолита помодульно на множество небольших приложений. Такой подход позволил сделать возможными непрерывную доставку и развертывание крупных приложений. При этом части приложения, микросервисы, получаются небольшими, легко масштабируемыми и простыми в обслуживании.
Но тут возникает новая проблема. Клиентам нашего приложения (клиентский сайт, приложение для смартфона, панель администрирования) теперь нужно знать о большом количестве сервисов и способе взаимодействия с каждым из них. Одним из решений в данной ситуации может быть создание шлюза – единых ворот для общения клиентов и микросервисов, но есть и другой подход.
В 2018 году компания Facebook выпустила первую стабильную версию проекта GraphQL. Это язык запросов, описывающий способ получения данных клиентом или сервером. С помощью этой технологии ваш заказчик может получать информацию о разных сущностях системы из нескольких источников (сервисов), делая выборку гибкой, а агрегацию простой.
Внедрение GraphQL может оказаться нетривиальной и трудозатратной задачей, для принятия решения о переходе требуется консультация опытного архитектора программного обеспечения. В тоже время GraphQL позволит решить проблемы получения данных из множества источников информации для различных клиентов, даст возможность снизить общее количество запросов между ними и сервером, а также уменьшит количество передаваемых данных с помощью гибких выборок.
VUE NEXT
Дмитрий Федоров, веб-разработчик:
В грядущем году всех фронтенд-разработчиков, использующих Vuejs, ожидает большое событие – релиз мажорной версии этого замечательного фреймворка. Актуальная на сегодняшний день вторая версия была выпущена больше трех лет назад: с тех пор было произведено множество небольших изменений, но грядущий релиз выглядит как произошедший когда-то апгрейд ангуляра до второй версии. По заявлению разработчиков, той же проблемы с переписыванием компонентов при переходе от первой версии Angular ко второй, удастся избежать, так как новый синтаксис является расширением того, что используют сегодня. Также это облегчит переход к новым концепциям для самих разработчиков – у них появятся новые возможности.
Попробовать возможности обновленного фреймворка можно уже сегодня: проект находится в статусе Pre-alpha.
Что же нас ожидает?
– Уже сегодня в репозитории можно увидеть то, что многие из нас так ждали. Процент TypeScript кода в репозитории – 96.1%!
– Как можно понять из предыдущего пункта, движок полностью переписан, архитектура улучшена, что должно повлиять на перформанс – заявляется повышение до 100%.
– Новая кодовая база спроектирована с нуля как tree-shaking friendly. Такие функции, как встроенные компоненты (<transition>, <keep-alive>) и директивы-помощники (v-model), теперь импортируются по требованию. Размер новой runtime библиотеки <10kb в gzip. Также мы можем предлагать больше встроенных функций в будущем, не прибегая к утяжелению полезной нагрузки для пользователей, которые их не используют.
– Vue 3.0 будет поставляться с реализацией паттерна Observer на основе Proxy, которая обеспечивает отслеживание реактивности. Это даст следующие преимущества: открытый API для создания наблюдаемых объектов, ленивое наблюдение по умолчанию, что ограничит ресурсы на наблюдение за неиспользуемыми при рендеринге полями. Также запланировано улучшение возможностей отладки: появится возможность точно отслеживать, когда и почему происходит перерисовка компонента или запускаются новые обработчики.
– Фрагменты и порталы: несмотря на уменьшение размера, 3.0 поставляется со встроенной поддержкой фрагментов (компонент, возвращающий несколько корневых узлов) и порталов (рендеринг поддерева в другой части DOM, а не внутри компонента).
– Для поддержки старых версий браузеров, таких как IE11, в котором нет поддержки Proxy, планируется сделать отдельный билд.
Подводя итог, нужно сказать, что команда Vue во главе с Эваном Ю поставила себе очень масштабную задачу, и уже сегодня можно увидеть, что она отлично с ней справляется. Нам же остается ждать выхода стабильной версии и надеяться, что она действительно будет такой быстрой и легкой, как обещают разработчики.
WebAssembly (wasm)
Дмитрий Конасов, ведущий веб-разработчик:
В последние годы код на фронтенде решает все более и более сложные задачи, переставая брать на себя исключительно отрисовку подготовленных данных. Форматы данных, которые приходится обрабатывать на клиенте, усложняются, на web-платформы портируются классические 3D-игры и пишутся новые. В общем, сайты уже давно перестали быть такими, какими мы их знали в конце нулевых-начале десятых. При этом язык Javascript, который, казалось бы, уже успел победить в вебе и Java, и Flash, и прочий ActiveX, не способен обеспечить тот уровень производительности, который необходим для решения упомянутых задач.
И тут нам на помощь приходит технология WebAssembly, также известная как wasm. Что это такое? По сути, это виртуальная машина, которая работает в нашем браузере. В то же время исполняемый ею байт-код работает гораздо быстрее, чем код, написанный на Javascript. И хотя прирост производительности иногда не слишком явный, ее уровень ниже, чем у нативного кода, а технология пока еще обладает рядом серьезных ограничений.
Есть несколько причин для того чтобы следить за WebAssembly в 2020 году и, возможно, даже использовать в своих проектах. Во-первых, wasm-модули начали стабильно и хорошо собираться из языков типа С, C++ и Rust. По-крайней мере, судя по тому же Яндексу, они уже вполне production-ready. Во-вторых, в ближайшее время должна появится прямая поддержка основных джаваскриптовых API (DOM, XmlHttpRequest и прочие), потоков, полноценный GC, что делает использование wasm еще проще, а саму технологию более востребованной. В-третьих, помимо С и Rust возможность писать под WebAssembly добавляется в огромное количество других языков. Эта поддержка пока не слишком развита, но тренд достаточно интересный и, возможно, в будущем он упростит портирование под web имеющихся приложений, написанных на разных языках. А еще появляются языки, которые созданы специально под wasm, например, AssemblyScript. Это почти Typescript, но у него есть несколько существенных отличий: он обладает только самыми простыми типами, в нем нет возможности использовать any (что дисциплинирует разработчиков), и в целом код на нем пишется в более «низкоуровневом» стиле.
В общем и целом, не смотря на то, что WebAssembly находится еще в некой стадии становления, данная технология уже достойна пристального внимания тех, кто хочет быть в тренде.
Источник: VC.ru