Python conf in Kharkiv, Nov 16 with Intel, Elastic engineering leaders. Prices go up 21.10

Избыточная вариативность во Front-end Stack: суть и причины

Меня зовут Александр Черненко, и я 5 лет занимаюсь Front-end-разработкой. Я Technical Lead в компании Nullgravity, и мне удалось вырастить уже более 15 разработчиков с уровня Junior до Middle и выше. Я управлял разными командами, иногда приходилось задействовать на пять фронтов одновременно на одном проекте; бывало, что консультировал только одного человека, который самостоятельно разрабатывал проект.

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

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

Постановка проблемы

Допустим, вы достаточно компетентны и умеете разрабатывать аккуратно и без code smells на JS или TS. Какой Front-end Stack по мере развития вашего приложения обеспечит надежность и хорошую производительность и при этом не сильно устареет с течением времени?

Казалось бы, лидирующие позиции давно уже захватили библиотека React и фреймворк Angular. Но их рейтинги могут стать шаткими в ближайшие годы, ведь на арену постоянно выходят конкуренты, такие как Svelte, Stencil и другие. Их авторы весьма амбициозно заявляют, что именно их инструменты лучше, быстрее, удобнее. А что, если их развитие подхватят крупные корпорации и они начнут по своим характеристикам догонять или даже выигрывать у старых добрых «реактов» и «ангуляров»?

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

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

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

В чем проявляется избыточная вариативность

Начинающим Front-end-разработчикам вообще трудно разобраться, какой инструментарий выбрать и чьим guidelines следовать. Что делать после того, как научился писать на JS? Учить Angular, React, Vue или, может, сразу Svelte?

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

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

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

У Android-разработчиков проблема вариативности инструментов не так явно выражена. В качестве основной IDE используется Android Studio, а в плане архитектуры кода есть «мейнстримовый» подход — Clean Architecture, который уже полюбился Android-сообществу и устоялся в нем. Guidelines, code style, tools во многом рекомендуются компанией Google.

Схожая ситуация у iOS-developers. Есть экосистема, которую заботливо создала и поддерживает компания Apple. Для большинства случаев достаточно использовать родные модули Swift, не прибегая к модулям сторонних библиотек. А в плане архитектуры существует Clean Swift Xcode — наиболее популярная IDE.

В Back-end-технологиях тоже много устоявшихся стеков. Литература, написанная для Java-разработчиков, устаревает не так быстро, как для разработчиков в web. Самый используемый фреймворк — Java Spring. Этого уже достаточно, чтобы решить, чему обучаться на начальных этапах.

У .NET developers экосистему поддерживает .NET Foundation и сам Microsoft.

Front-end выглядит иначе, ведь у нас нет единой «верховной» частной корпорации (такого уровня, как Google, Apple, Oracle или Microsoft), которая централизованно управляла бы правилами разработки для всех. Наши приложения должны одинаково хорошо работать на всех популярных операционных системах и браузерах.

Мы работаем со стандартами некоммерческих организаций, такими как W3С, WHATWG, TC39 и другими. И здесь, с одной стороны, полная свобода действий, с другой — полный хаос. За создание наиболее «правильного» инструментария и архитектурных подходов ведут конкурентную борьбу как Google и Facebook, так и менее крупные компании.

Вариативность в стандартах для web-приложений и ее причины

Устоявшегося мнения о том, как писать приложения для web, пока нет. Направление активно развивается, и ситуация вряд ли изменится ближайшее время.

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

Веб-приложение — клиент-серверное приложение, в котором клиент взаимодействует с сервером с помощью браузера, а за сервер отвечает веб-сервер (согласно Wikipedia).

Front-end — это все, что касается клиентской части, и эта клиентская часть может технически существовать в разных формах.

Основные формы — Multi-Page application (форма классических веб-сайтов, существовавшая изначально), Single-Page application, Server-Side Rendering Application и модный сейчас Progressive Web Application. Не исключено, что в ближайшем будущем появятся другие варианты.

Также важно понимать, что деплоить Front-end-часть веб-приложения можно тоже по-разному: это может быть классический монолит, JAMstack-архитектура либо так называемые micro frontends.

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

Факторы развития Front-end Stack

Основными факторами, которые развивают Front-end Stack, являются следующие.

Развитие в протоколах прикладного уровня (application layer protocols)

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

Объемы и скорость потребляемого трафика в сети постоянно растут.

Особенно это касается передачи видео. На рынке медийного контента уже практически везде поддерживается формат 4K, и такие гиганты, как Netflix, YouTube и прочие регулярно решают проблемы трансляции видео в высоком качестве.

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

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

Возьмем, к примеру, протокол транспортного уровня.

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

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

Для их решения разработали протокол прикладного уровня QUIC, но не поверх TCP, а поверх UDP.

Схема работы протокола QUIC на основе UDP (источник)

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

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

Поверх слоя TCP браузеры сейчас умеют работать с 2 протоколами приложений — старым добрым HTTP/1.1 и многофункциональным HTTP/2, который с 2015 года поддерживают большинство вендоров; но, как по мне, он все еще находится на стадии активного освоения со стороны поставщиков инструментов для разработки.

Работа внутри HTTP/1.1 тоже постоянно расширяется за счет появления новых заголовков, поддерживаемых браузерами.

Когда появился HTTP/2, было много статей о том, что теперь не нужно прибегать к сборке application bundle в 1 файл и не нужно объединять картинки в sprites.

На практике же достичь этого результата не так просто, детальнее можете почитать почему.

Вторым важным преимуществом HTTP/2 стала возможность сразу отдавать браузеру необходимые assets благодаря Server Push. Опять же, для этого необходимо использовать ряд вспомогательных библиотек, которые разруливают в таком случае проблемы с кэшированием и другие нюансы.

Еще одной абстракцией прикладного уровня поверх TCP являются WebSockets.

Веб-сокеты, в отличие от HTTP, позволяют работать с двунаправленным потоком данных, что делает эту технологию совершенно уникальной. При этом WebSockets обязывают вас брать на себя решение ряда вопросов по поддержке стабильного соединения и передачи данных (решенные за вас автоматически в HTTP/1.1 и HTTP/2, так как там действует классическая синхронная модель «запрос — ответ»). Эти проблемы фактически оставлены на откуп разработчикам. Они, с одной стороны, дают свободу действий, с другой — плодят множество «велосипедов». Если не вдаваться в подробности, то по факту мы имеем ряд конкурирующих популярных библиотек типа Socket.IO или SockJS (которые нужно настраивать одновременно и в браузере, и на стороне сервера), и, естественно, каждая имеет свои плюсы и минусы.

Допустим, вам необходимо разработать веб-приложение с push-notifications в браузер. Какие технологии вы возьмете в 2019 году? WebSockets или HTTP/2 плюс SSE? Однозначного ответа нет. Подробнее о проблематике выбора можно почитать здесь.

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

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

Развитие возможностей браузеров

Новые протоколы расширяют возможности браузеров. Browser Api сейчас вообще разрастается сумасшедшими темпами. Уже никого не удивишь push-notifications или service workers.

Много обновлений выходят в контексте общей парадигмы Progressive Web Applications продвигаемой Google. Они запланировали внедрение ряда новых APIв будущем, которые еще сильнее расширят возможности браузеров. Из них меня больше всего впечатлил анонс «Native File System API», которая позволит считывать и редактировать файлы на ОС пользователя.

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

Из других интересных браузерных анонсов мне запомнились Task Scheduling API и экспериментальный проект CSS Houdini. Первый позволит разработчикам более явно контролировать и расставлять задачи JavaScript-движка по приоритету, второй дает возможность с помощью JS и вне MainThread описывать поведение своих произвольных CSS-правил.

Развитие форматов обмена данными

Хороший протокол данных еще не означает, что вы их эффективно используете и экономите трафик. И хотя в большинстве решений доминирует стандартный JSON + REST, существует много сложных приложений, для которых нужно индивидуально подбирать наиболее оптимальный формат представления данных.

Из самых модных и часто используемых можно отметить GraphQL от Facebook, gRPC + Protobuf от Google (в связке с HTTP/2, но с «костылями» на фронте).

Еще довольно популярным является формат JSON-RPC.

Эволюция языков программирования

Пока индустриальным стандартом остается ECMAScript. Существуют фреймворки с применением других языков, которые компилируются в ES, но итоговый код для браузеров все равно генерируется на ES.

Начиная с 2015 года ES очень активно развивается и дополняется. Фактически мы каждый год получаем обновления в ECMAScript от Ecma International Technical Committee 39. Самое свежее обновление — это ES-2019 (ES10), ну а на стадии черновика в комиссии находится редакция ES-2020.

Мультипарадигмальность

Для разработки на ECMAScript недостаточно какой-либо одной парадигмы, и это большая проблема. Даже в рамках фреймворка вы можете писать код, совмещая подходы из объектно-ориентированного, функционального или даже реактивного программирования. Сейчас уже встречаются Front-end-приложения, которые вообще разрабатываются как microfrontends и разделены на изолированные модули, которые не зависят друг от друга.

Требования к продукту

Появление новых Browser API позволяет создавать продукты с новыми возможностями, а это уже весомое конкурентное преимущество. Поэтому бизнес просит разработчиков внедрять все более сложные и оригинальные функции. С течением времени требования к продукту только растут.

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

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

Развитие фреймворков и библиотек

Во второй половине двухтысячных Single Page Application только начинали появляться. В большинстве своем за UI отвечали верстальщики, многие из них не знали толком JavaScript и довольствовались библиотекой jQuery (которую сейчас так ненавидят).

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

А еще в 2009 году Райан Дал разработал Node.js. С развитием и популяризацией Node.js и его пакетного менеджера npm появился популярный и простой способ размещать свои «библиотечки» на JS и совмещать их.

Вот тут на арену стали выходить большие фреймворки с сопутствующей инфраструктурой по сборке, тестированию, отладке и т. д. Например, в 2010 году вышел Backbone.js на архитектуре Model-View-Presenter.

Популярные фреймворки и библиотеки для Front-end (источник)

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

Суть js-фреймворков

Но также мы видим, как продолжают появляться достаточно интересные и элегантные способы — такие, например, как библиотеки lit-html или hyper-html.

Давайте взглянем на описание относительно молодого движка для веб-приложений Svelte: Svelte is a new way to build web-applications. It’s a compiler that takes your declarative components and converts them into efficient JavaScript that surgically updates the DOM.

А еще есть Angular, React, Preact, Vue.js, Elm, Ember.js, Meteor, Mithril, Polymer, Aurelia и много других.

Так или иначе, на каком «велосипеде» вы поедете, решать только вам.

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

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

Есть vendors, которые занимаются созданием кроссплатформенных и изоморфных продуктов. Это Angular Universal, React Native, Flutter и другие, но это уже является отдельной темой для разговора и касается не только Web Front-end.

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

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

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

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

По сей день вся суть фреймворков и библиотек для построения web-applications состоит в том, чтобы предложить эффективный и удобный способ для работы с DOM (Document Object Model), деревом в браузере.

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

Существует множество вариантов решения этой задачи.

Я считаю, что сейчас на рынке наибольшую популярность в этом плане обрели React и Angular с их движками Fiber и Ivy.

Основные драйверы развития Frond-end Stack

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

О чем важно помнить, выбирая Front-end Stack

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

У фронтендеров, да и у большинства разработчиков, огромною роль играет community.

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

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

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

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

В таком формате я познакомился с Progressive Web Applications. В компании мы проводили research на внутреннем проекте, и одной из целей было получение практического опыта использования PWA. Мы тогда научились работать с service workers и узнали различные технические нюансы. К примеру, мы узнали, что, применяя service-workers для кэширования ajax-запросов, обязательно использовать только fetch, соответственно, невозможно кешировать данные для service-worker c помощью библиотек, под капотом которых используется старый браузерный метод XHR. Это может быть реальной проблемой, если вы используете готовые решения. Мы тогда использовали npm-пакеты для работы с firebase, у них под капотом был XHR. Правда, тогда нам повезло, так как для них уже была реализована своя библиотека для offline-кэширования. Также мы поняли, что настроить базовый конфиг PWA не составляет труда, а вот работа с настройкой кэширования для режима offline оказалась затратной.

Еще есть вариант, когда вы пробуете новые вещи на реальном проекте, но не всюду, а в определенных небольших кусочках функционала. В компании, где я работаю, наш базовый стек — это React и Typescript. Как только появились React Hooks в альфа-версии React, мы внедрили их на нескольких участках нашего проекта. Главное было сделать это изолированно от основной части кода — таким образом, чтобы в случае чего можно было откатить эти компоненты обратно до классов. Нам очень понравился этот новый API, да и сам паттерн добавления в компоненты React Hooks позволяет писать более понятный код. Уже через месяц после того, как мы их внедрили, они вошли в полноценный релиз React. Мы внедрили их полностью в тот проект, сейчас продолжаем активно их использовать и на других проектах и отдаем им предпочтение.

Если же у вас совсем нет времени на проведение экспериментов, вы можете ознакомиться с проектом RealWorld. Это множество копий Medium, реализованных на разных стеках. Вы можете ознакомиться со всеми исходниками и пощелкать демки.

Я всегда обязательно смотрю на поддержку Typescript и наличие хороших test-suites, test-renderers, test-runners для изучаемого фреймворка, так как для больших проектов важно иметь статическую типизацию и наличие unit-tests.

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

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

Выводы

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

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

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

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

При выборе определенного фреймворка рассматривайте не только его, но и всю сопутствующую или отсутствующую (как в случае с новейшими фреймворками) экосистему: возможности добавления статической типизации (TypeScript / Flow) и наличие типизированных npm-пакетов, testing tools, performance profiling tools и др.

Фреймворки ничто, мастерство все :)

Пишите код чисто. И да пребудет с вами сила!

LinkedIn

41 комментарий

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

Front-end сильно піддається моді і це не добре. Старі технології не покращуються, і старі проекти стають легасі. Хто встановлює стандарти, той буде мати з цього зиск, але навіть Microsoft провалила багато своїх веб технологій. Уже веб форми застаріли, а це була дуже легка для вжодження технологія.

Зачем вы пытаетесь описывать вещи, в которых не разбираетесь?

существует Clean Swift Xcode — наиболее популярная IDE.

IDE называется Xcode, а Apple никогда не рекомендовала архитектуру разработчикам, поэтому в 2019 до сих пор на конференциях встречаются доклады про архитектуру и велосипеды.

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

Ну что ж, это моя первая статья, спасибо за отзыв, буду совершенствоваться)

«Во второй половине двухтысячных Single Page Application только начинали появляться» хм, интересно

Ок, если буквально смотреть на формулировку «A Single Page Application is a web application that requires only a single page load in a web browser.» — то были технологии еще в 90х годах по типу Java Applets или тех же Flash. Но у тех подходов мало общего с современным понятием SPA. С начала двухтысячных популярность начал набирать XHR + JSON, в 2004 вышла Dojo, в 2005 — Prototype, 2006 — YUI, jQuery, MooTools и потом еще много других популярных js библиотек. Ну и затем уже начали активно вестись работы над SPA фреймворками именно на JS с templating, routing, model-view binding и т.д. А в 2008 подкатил еще github и тогда вообще понеслась.

Alex Chernenko, пожалуйста добавьте в начало статьи так называемый TL;DR;

Если вы не знали, не ведали наукообразной графомании, то вот она.

Ок) Ждем от вас лаконичную смысловую статью в сфере мульти-дисциплинарной аналитики и инжинирингового консалтинга)

Думаю самое интересное начнется с массовым принятием WebAssembly

WebAssembly це рішення для вузьки і навантажених місць, а не всього підряд.
Коли з’явився Canvas, то ніхто ж на DOM не забив.

Есть большая вероятность что он станет решением для всего подряд.
Blazor и Uno Platform одни из первых прецедентов.

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

ORLY?
en.wikipedia.org/wiki/JQuery
Initial release August 26, 2006; 13 years ago

Спасибо! Оказывается жейквери не так уж стар)

Ага. 15 лет назад, иногда встречался и vanilla vbscript)

Забавно, если бы Bill Gates больше интересовался своей компанией, скорее всего React сейчас был бы написан на нём)

Ну, ок. Первую половину я честно прочитал, пытаясь увидеть намеки на ответ «суть и причины». Вторую — пролистал. Там где-то есть абзац о том, почему такая избыточная вариативность (кроме «некому контроллировать») и какова ее суть?

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

Да все устоялось уже года 2 как минимум. Учишь Typescript -> React + экосистему и всё, в крайнем случае Vue. Сейчас фронт удобен и практичен для изучения и разработки как никогда. React останется на передовой еще очень долгое время, года 3-4 минимум.

А весь зоопарк фреймворков и «вариативность»...

Front-end выглядит иначе, ведь у нас нет единой «верховной» частной корпорации (такого уровня, как Google, Apple, Oracle или Microsoft), которая централизованно управляла бы правилами разработки для всех.

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

React останется на передовой еще очень долгое время
года 3-4 минимум

:)))

почему такая избыточная вариативность

Я бы ответил так: все дело в том что написать js framework достаточно просто одному человеку.
vue — 8K LOC
react — 15K LOC

Технически-то да, на деле в этих 15к строчек очень много мысли и качественных решений. Достаточно почитать overreacted.io чтобы понять, что React каждый второй не напишет и нужно быть действительно талантливым человеком чтобы «достаточно просто» написать что-то адекватное в одиночку.

Vue — хотя бы имеет в этих 8K концепт реактивных свойств. А React умеет не сильно больше hyperapp (который вообще 433 строчки кода). Алгоритм виртуального дома чуть быстрее разве что.

я офигел от того, как Preact уместился в 3Кб(в том числе, из-за отказа от synthetic events)
упс, промахнулся с тредом

Да весьма популярная тема. Некоторые называют его «паленый» реакт.

Спасибо, статья интересная, хотя топик не полностью раскрыт, мне показалось.

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

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

Можно еще так сказать, бизнес хочет инноваций и внедрения новых идей, под них создаются новые апишки. Затем компании «пионеры» начинают их активно использовать. Уже затем остальной «более консервативный» бизнес на рынке начинает копировать такие решения и использование этих апишек в работе становится уже не инновацией а mainstream или must have.

Можно сделать проще и просто поочерёдно вбить react/angular/vue в поиск по вакансиям. Отлично покажет каких спецов рынок требует на данный момент.
Я думаю это еще будет неплохо коррелировать с популярностью/комьюнити/количеством готовых решений. Плюсом к тому скорость разработки, поддержка проектов в будущем и банальная возможность скопировать лог ошибки из консоли на stackoverflow.

Сам по данной причине выбрал React как основную технологию
Вам то придется с этим работать, а не думать «какой стильный модный молодёжный фреймворк я выучил».

На счет рынка, соглашусь от части, нужно еще уметь смотреть в будущее, мы работали с React во времена, когда мейнстримом был Angular

Мабуть мався на увазі AngularJS

Интересная комбинация собственного опыта и размышлений на тему. Спасибо.

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

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

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

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

да именно он «стал» неповоротливым, где-то после версии 1.3 он пошёл куда-то не туда.

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

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

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

Так стало быть производительность важна, но не первостепенна. О том и речь :)

С конца 2010-х

2000-x полагаю.

Да, пожалуй соглашусь

Тут скорее речь идет о популяризации и развитии сложных веб-приложений в эко-системе node

Подписаться на комментарии