Самые популярные фронтенд фреймворки 2021
Правильный выбор технологии для программирования web-сайта играет важную роль, поскольку именно она ложится в его основу. Согласно данным опроса, проведённого платформой “StackOverflow” в 2020-ом году, почти 70% профессиональных разработчиков из более чем сорока семи тысяч используют JavaScript. У этого языка программирования имеются и недостатки, и достаточно сложные части, но несмотря на это он уже не первый год удерживает пальму первенства и является одним из самых популярных. Его используют и те, кто только делает первые шаги в программировании, и настоящие профи, которые считают его оптимальным решением на сегодняшний день. В нашем материале мы рассмотрим фреймфорки Javascript, узнаем об их особенностях, преимуществах и недостатках, а также проведём анализ трендов этого года.
Итоги
Если сделать выводы из вышесказанного, то получится, что лучшим фронтенд-инструментом, тем самым, который стоит изучить в 2021 году, является React. За ним следует Vue. Но высоки шансы того, что вместо Vue следом за React можно будет поставить Angular. Этот фреймворк существует дольше Vue. Непохоже, что в 2021 году Angular исчезнет. Поэтому, если вы являетесь Angular-разработчиком, то я советую вам, готовясь к 2021 году, приступить к изучению React.
Как вы думаете, какие веб-инструменты будут особенно востребованными в 2021 году?
В статье поделимся нашим взглядом на 15 технологий в области фронтенда на 2021 год. К части технологий мы активно присматриваемся, некоторые начинаем применять, другие давно используем и рекомендуем вам, а есть и такие, от которых отказались, и расскажем вам, по какой причине.
За систему координат возьмем методологию «Технологический радар», которую распространяет компания ThoughtWorks. С деталями методологии, а также с актуальным радаром по всей ИT-индустрии можно ознакомиться на сайте ThoughtWorks.
Если вы еще не сталкивались с технологическим радаром, то далее коротко расскажем об основах методологии. Если сталкивались — смело переходите к разделу с технологиями.
Как и на настоящем радаре, точки (технологии) на радаре могут появляться и исчезать, а также перемещаться со временем. Радар делится на квадранты и кольца. Квадранты — это категории технологии, а кольца — определенный уровень адаптации технологии. Если представить, что мы в центре радара, то чем ближе технология к нам, тем она больше рекомендована.
Всего есть четыре уровня адаптации:
Цели, которые достигаются технологическим радаром, а также процесс сборки оставим для другой статьи, чтобы быстрее перейти к главной теме — технологиям.
6. Backend for Frontend (BFF). Trial
Когда бэкенд использует микросервисную архитектуру, на фронтенде это может нести определенные накладные расходы в виде большего количества запросов на сервер или избыточного формата ответа сервера, что влияет на скорость работы интерфейса. Паттерн BFF призван решить эти проблемы.
BFF — это тонкий бэкенд для специализации ответа под конкретный клиент. Например, BFF может создаваться под отдельные пользовательские истории, чтобы они работали быстрее.
При использовании этого паттерна важно не размыть ответственность за бизнес-домен. Поэтому необходимо следить, чтобы сервис BFF оставался максимально тонким, соответствовал принципам отказоустойчивости и вся ответственность за бизнес-домен оставалась на исходном сервисе.
Подробней ознакомиться с паттерном Backend for Frontend можно в статье Сэма Ньюмана.
Angular
Angular (по данным State of JavaScript 2019)
Для меня Angular — это фреймворк, с которого я начинал моё путешествие в мир разработки ПО. И я не жалею о том, что выбрал именно этот фреймворк. Angular, в сравнении с другими рассматриваемыми здесь инструментами, можно счесть немного более зрелым, чем они. Вокруг него сформировалось более крупное сообщество. Помимо того, что этот фреймворк является частью знаменитого стека MEAN, он ещё и даёт разработчику немало замечательных возможностей. Это, например, двусторонняя привязка данных, внедрение зависимостей, архитектура MVC, Angular CLI, поддержка TypeScript, поддержка директив и так далее.
Но в последние несколько лет, по мере роста популярности конкурентов, вроде React и Vue, Angular потерял часть былой популярности. Причиной этого стало то, что Angular — достаточно «тяжёлый» фреймворк. Он не соответствует ожиданиям программистов по многим показателям. Это и особенности выхода его новых версий, и ограниченная поддержка SEO, и сложности в его изучении. Именно поэтому в наши дни фронтенд-разработчики всё чаще выбирают Vue или React. Но Angular всё ещё используется во многих популярных веб-проектах. Это, например, проекты Guardian, Upwork, PayPal, Sony. Речь идёт о больших серьёзных сайтах, на которых Angular хорошо себя показал.
К Angular стоит присмотреться в следующих ситуациях:
- Разработка крупномасштабных проектов.
- Необходимость применения масштабируемой архитектуры.
- Заинтересованность в использовании TypeScript.
- Создание приложений, работающих в режиме реального времени.
▍Автоматизация сборок проекта
Использование JAMstack позволяет идеально автоматизировать процесс сборки проекта. Дело в том, что вся Markup-разметка готова к работе, в неё встроены, например, веб-хуки и механизмы для работы с облачными службами.
8. Micro frontends. Adopt
Основные цели, которые достигаются с помощью микрофронтендов: ускорение поставки изменений и повышение поддерживаемости кодовой базы. Ускорение поставки за счет инкрементальных, а не монолитных релизов. Кодовая база большого проекта, разделенная на микрофронтенды, удобнее в развитии, а код каждого отдельного микрофронтенда — целостней и компактней. Например, для обновления шапки сайта вам нужен релиз только одного модуля, а само приложение-контейнер не потребует обновления.
Если у вас крупный проект с множеством команд разработки, то микрофронтенды рекомендуются к использованию.
React
React (по данным State of JavaScript 2019)
React, по данным исследования State of JavaScript, три года подряд занимает первые места во всех рейтингах. Библиотека React была выпущена Facebook в 2013 году. Цель создания React заключалась в разделении пользовательского интерфейса на набор компонентов, что должно было упростить процесс разработки. Одним из преимуществ React является возможность использования этой библиотеки для разработки нативных приложений. Среди других сильных сторон этой библиотеки можно отметить большое сообщество, поддержку со стороны Facebook, обширную экосистему, высокую производительность, механизмы многократного использования компонентов, поддержку SEO-механизмов.
Правда, иногда обновления React могут вызывать некоторые разногласия и споры в среде разработчиков, так как им приходится что-то менять в своей работе для того чтобы избежать проблем с совместимостью. Среди других минусов React отмечают применение JSX и недостаточно подробную документацию.
Вот ситуации, в которых можно прибегнуть к React:
- Создание одностраничных или кросс-платформенных приложений.
- Разработка небольших приложений корпоративного класса.
Vue — это проект, который появился сравнительно недавно. Он неожиданно превратился из обыкновенного фреймворка в один из самых любимых программистами инструментов веб-разработки.
Vue (по данным State of JavaScript 2019)
Популярность этого фреймворка стремительно растёт, причиной этого являются его скромные размеры, подробная документация, поддержка многократного использования компонентов и реактивности, возможность применения TypeScript, лёгкость в изучении. Vue — очень особенный фреймворк, некоторые его особенности могут даже выглядеть как недостатки. Например, Vue отличается чрезвычайной гибкостью. Но иногда, для команд, состоящих из большого количества разработчиков, он может оказаться слишком гибким.
Специалисты по этому фреймворку сейчас чрезвычайно востребованы на рынках Азии. Но у Vue есть и недостатки. Например — не очень хорошая приспособленность к поддержке крупномасштабных проектов и небольшое сообщество. Правда, существуют ситуации, в которых Vue вполне может стать идеальным выбором:
- Разработка маленьких и нетребовательных к ресурсам приложений (вроде Grammarly).
- Создание интеллектуальных и высокопроизводительных проектов.
- Разработка веб-приложений на ранних стадиях их выхода на рынок.
Итоги
В этом материале я рассказал вам о 10 направлениях развития для того, кто стремится стать эффективным фронтенд-разработчиком в 2021 году. Мой список, правда, не претендует на полноту. Мир фронтенда огромен. Но я надеюсь, что смог показать вам что-то такое, что вас вдохновит, такое, что позволит вам вырасти над собой в 2021 году.
Frontend frameworks are the fundamental building blocks of the software development process. However, there are numerous options to consider when it comes to creating visually appealing apps with a high user experience. We’ve compiled a list of the best frontend frameworks for 2021 to help you out. Let’s take a closer look at them!
Today, every business’s top priority is to provide the best possible user experience. Even the brief you receive on your project as a developer mentions the simplicity of the user interface it is supposed to have. What users see and feel must be seamless, regardless of the dynamic tasks and processes taking place in the context.
Netflix, Facebook, Instagram, and other highly popular businesses work under this principle.
Take any of these websites, and you will find they are powerful, simple, and have a brilliant user interface.
All thanks to the myriad of frameworks running under the hood. However, with the increasing demands of customers and the market, there is a constant need to push the quality in terms of usability and functionality. That’s when concerns start popping up.
In terms of relative popularity, the graph below depicts the overall popularity of each framework mentioned in the best frontend frameworks in 2021.
We can see that VueJs and ReactJs have been in high demand since 2020–21.
With regards to jQuery, it’s been in high demand for a long time. The explanation for this is that jQuery still performs wonderfully once you don’t get to use giant frameworks like Angular and React but need faster development with minimum functionality.
In the next section, we’ll look at how each framework defines itself in its current state and how we can choose one for our future development needs.
According to The State of JavaScript 2019, React, Angular, and Vue are the most common frontend frameworks among developers, making them the top three frontend frameworks in 2021 as well.
Let’s take a closer look at each of these. Emberjs and Svelte, on the other hand, have a unique situation.
Svelte is a common framework that is still in the early stages of development, but it has piqued the attention of the developer community.
Emberjs is more capable, but due to its traditional learning curve approach, it hasn’t been used by a large number of developers.
Without Angular, you can’t have a list of the best front-end development frames.
The only TypeScript-based framework in this list is Angular. Angular was created by Google in 2016 to fill the gap between the growing demands of technology and traditional ideas that produced performance.
Angular is different from React in that it has a two-way data binding feature. It ensures that the model and the view are synchronized in real-time, meaning that any change in the model is immediately reflected in the view, and vice versa.
If you’re working on a project that includes developing smartphone or web applications, Angular is the way to go. Furthermore, you can use this platform to build multi-page and progressive web apps. Businesses such as BMW, Xbox, Forbes, Blender, and others are using Angular-built applications.
Angular is more difficult to understand than React. Despite the fact that there is a wealth of documentation available, it is either too abstract or frustrating to read.
Pros:
- Most important features, such as two-way data binding, are available by default, which reduces the amount of code.
- Built-in feature to update model changes to the view and vice versa.
- Components can be reused and managed easily by injection dependency.
- A huge learning and support community.
- By identifying them as external elements, the components are decoupled from their dependencies.
Cons:
- The learning curve is steeper since Angular is a total dynamic solution with many ways to execute the operation.
- On, the other hand, makes it simple for newcomers to learn about concepts and technology.
- It is sometimes because of its complex structure and size that dynamic apps do not perform well.
- Optimization of codes and best angular practice are the Cons.
Angular increases browser-based applications performance by updating their contents dynamically in no time, as two-way data binding is employed.
Angular is the perfect option for enterprise-based software and dynamic web apps.
Angular js can be avoided, with less difficulty and easy syntax if you have a smaller team.
As a frontend platform, Angular is a full package. You won’t be able to use the tools provided by Angular if you choose to create applications with small scopes.
React, one of the easiest frameworks to learn was created at Facebook to address code maintainability problems caused by the app’s continual inclusion of new features.
React is distinguished by its virtual Document Object Model (DOM), which provides superior functionality. A good structure for those who expect a lot of traffic and need a solid platform to manage it.
React is recommended for projects involving the creation of single-page web applications and progressive web applications (PWAs).
Pros:
- It allows you to write components without classes and can learn to React more easily than writing in reacting hooks.
- Item reusability facilitates collaboration and reuses in other areas of the application.
- React dev instruments are advanced and extremely useful.
- Digital DOM allows for consistent and seamless results.
Cons:
- Due to several constant updates within the framework, the proper documentation becomes difficult to produce, and thus the learning curve for beginners is affected.
- Only leading solutions are provided.
- When starting out with JSX, developers find it difficult to grasp the framework’s complexities.
When developing single-page applications, React is used to design the user interface. Since the components can be reused, it is the most stable frontend architecture for creating an interactive interface in less time.
React isn’t the best option if you don’t have any prior experience with Javascript. The JSX learning curve is also somewhat tough for inexperienced developers.
Vue.js is a simple and straightforward front-end system that is one of the most common today. It’s good at alleviating the problems that Angular developers must deal with.
It has a smaller size and has two big benefits: visual DOM and component-based. It’s a two-way binding, as well.
Vue.js is a flexible tool that can be used for a variety of purposes. It can manage both basic and complex processes with ease, from web applications and mobile apps to progressive web applications.
Despite the fact that it is designed to improve app efficiency and deal with complexities, it is not commonly used by market leaders.
For example: Alibaba, 9gag, Reuters, and Xiaomi, use this platform.
Despite fewer Silicon Valley users, the view of adoptions of VueJs continues to grow.
Pros:
- Documentation that is extensive and comprehensive.
- Simple syntax — Vue.js is simple to learn for programmers with a javascript background.
- Flexibility in app layout design.
- Documentation that is extensive and comprehensive.
Cons:
- Inconsistency of components.
- For plugins and components, there is a language barrier.
- Very small community.
- Most of the plugins are written in the Chinese language.
For flexible structures, Vuejs is recommended. It allows you to design everything from scratch and also develops massive projects successfully.
Furthermore, applications that need stable components should not be designed with Vuejs due to the framework’s component stability issues.
If you believe that the support community would respond to the complexities, Vuejs is not the way forward.
Исследование State of JavaScript
Отношение респондентов исследования State of JavaScript к фреймворкам и библиотекам
Как видно React и Vue обходят Angular по показателю, характеризующему вариант ответа «Использовал и буду использовать».
Компилятор “Svelte”
Имеет в своей основе “Reactive.js” и является сравнительно новым фреймворком, выпущенным около пяти лет тому назад. Отличается удобством благодаря возможности использования непосредственно в web-браузере. Пока не располагает своим сообществом ввиду «молодости».
Преимущества данного фреймворка:
- Лёгкость и высокая производительность;
- Возможность уменьшения масштаба сайта за счёт уменьшения его размера;
- Простота освоения для тех, кто начал заниматься программированием недавно.
- Пока ещё маленькое, хоть и постоянно развивающееся сообщество;
- Сложности с решением тех или иных проблем, возникающих при изучении;
- Невозможность использования для крупномасштабных проектов.
Заключение
Профессия «фронтенд-разработчик», без сомнения, будет одной из самых востребованных в 2021 году.
Раньше тем, кто работал в этой сфере, для создания интерактивных сайтов достаточно было знать HTML, CSS и, возможно, jQuery. Но сегодня фронтенд-разработчик вынужден существовать в обширной и постоянно меняющейся экосистеме, состоящей из инструментов, библиотек, фреймворков. Разработчику жизненно необходимы навыки владения самыми разными средствами, ему постоянно приходится вкладывать время и силы в самообучение.
В последние несколько лет мир увидел замечательные новые библиотеки и фреймворки, основанные на JavaScript и составляющие сегодня основу практически любого веб-проекта. Это, например, React, Vue, Svelte.
В этом материале я хочу дать всем желающим советы о том, на освоение чего нужно обратить внимание уже сегодня для того чтобы достойно встретить 2021 год. Эта статья рассчитана на широкий круг веб-разработчиков — от тех, кто только начинает свой профессиональный путь, до тех, кто уже кое-что умеет.
Небольшие обзоры самых популярных frontend-фреймворков JavaScript
Прежде всего стоит рассмотреть пятёрку, которая уже не первый год пребывает в лидерах.
1. JavaScript. Hold
JavaScript остается самым популярным языком программирования в мире, если судить по результату опроса Stack Overflow и исследования от GitHub. Это преимущество, за счет которого вы можете быстрее укомплектовать свою команду необходимой компетенцией или найти готовый модуль на нужном стеке в Open Source. На JavaScript проще начать программировать, хотя, чтобы стать Senior-разработчиком, нужно приложить столько же усилий, сколько в любом языке программирования. Если использовать транспилятор Babel, можно экспериментировать с последними спецификациями EcmaScript.
К сожалению, JavaScript — язык программирования с динамической типизацией и обладает связанными с этим недостатками. Основной из них — отсутствие контрактов. Код без контрактов сложнее развивать и сложнее проводить рефакторинг. Из-за динамической типизации JavaScript местами требует избыточных конструкций — к примеру, когда необходимо проверить, тот ли объект вам пришел, тот ли тип вы получили. В итоге получаем риск пропустить ошибку.
Мы рекомендуем отказаться от JavaScript и перейти на доступный для задач фронтенда типизированный язык программирования. Мы выбрали TypeScript, о котором дальше.
1. Фреймворки
В 2021 году мы, возможно, станем свидетелями дуэли между библиотекой React, за которой стоит Facebook, и фреймворком Vue, поддержкой которого занимается сообщество разработчиков. У репозитория React на GitHub сейчас имеется примерно 159000 звёзд, а у репозитория Vue и того больше — около 175000. А вот у Angular, например, всего около 67500 звёзд. Если говорить о статистике по поисковым запросам за 2019 год, график которой представлен ниже, можно найти соответствие с вышеозвученными данными. Библиотека React здесь представлена синей линией, фреймворку Vue соответствует красная линия, Angular — жёлтая линия. Тут имеются и данные по Svelte, показанные зелёной линией, но они несравнимы с показателями других фреймворков. Как видно, Vue идёт немного впереди React, а Angular от них отстаёт.
Данные по поисковым запросам, касающимся Vue (красная линия), React (синяя линия), Angular (жёлтая линия) и Svelte (зелёная линия)
В результате можно сказать, что в 2021 году фронтенд-разработчикам, которые пользуются или планируют пользоваться JavaScript-фреймворками, стоит обратить особое внимание на React и Vue. Angular подойдёт тем, кто работает над крупными проектами.
Узнать подробности о React и Vue можно на официальных сайтах проектов.
Frontend-фреймворк “Ember”
Данный каркас web-приложений тоже реализует шаблон “MVC” и призван решать задачу по упрощению разработки посадочной страницы. Он был разработан около десяти лет тому и на сегодняшний день считается рекомендованным профессионалам программирования, которые занимаются разработкой инновационных решений.
Что касается ключевых функций, то одна из них – двухсторонняя привязка данных, позволяющая синхронизировать модель и вид. Ускорение рендеринга серверных DOM и существенное повышение производительности сложных пользовательских интерфейсов достигаются с помощью библиотеки “Fastboot”. Преимущества:
- Применение простых шаблонов для оперативной и лёгкой разработки интерфейсов;
- Максимально простая настройка благодаря плагину “Inspector”;
- Возможность компиляции применяемых шаблонов на сервере;
- Возможность добавления маршрутов вложения поверх представления шаблона.
- Сложность в освоении новичками;
- Отказ от использования простых моделей JS;
- Недостаточно большое сообщество, что нередко затрудняет поиск нужного решения.
Обзор системы «“1С-Bitrix”: управление сайтом»
Согласно статистическим исследованиям компании “iTrack” за март 2021-го года, в которых приняло участие почти пять миллионов доменов Рунета, среди общих платных тиражных CMS с огромным перевесом (более 45%) первое место занимает «1С-Битрикс».
9. Inner source. Assess
Если вы нацелены на ускорение поставки, распространение владения кодовой базы и межкомандное сотрудничество, то подход Inner Source может быть вам интересен.
Inner Source — это как Open Source, только внутри компании, который позволяет уменьшить зависимость от смежных команд разработки, что должно привести к ускорению выполнения задач.
Разберем на примере. Допустим, у вас есть две команды и первая команда хочет доработку от второй. Команда 1 приходит к команде 2, добавляет свою задачу в очередь бэклога и получает блокирующую зависимость в исполнении своего проекта. В случае с Inner Source все репозитории открыты внутрь компании. В таком подходе команда 1 может сделать pull request в целевую систему, а владелец системы — команда 2 — эти изменения проверит и вольет в основную ветку. Выходит, что первая команда получит свою доработку быстрее за счет использования собственного ресурса, чем если бы ждала, своей очереди в бэклоге другой команды.
Чтобы Inner Source работал, недостаточно просто открыть все репозитории — важно применять общие стандарты, такие как хорошая документация, понятный и прозрачный процесс контрибьютинга, качественная инфраструктура для развертывания изменений.
Эта практика может положительно повлиять на мотивацию вашей команды, благодаря возможности влиять на любую систему компании, а также улучшить горизонтальные связи — допустим, между всеми фронтенд-разработчиками компании.
Подробней ознакомиться с Inner Source можно на сайте комьюнити Inner Source.
12. Semantic release. Trial
Подход Semantic Release позволяет автоматически назначать версии и публиковать пакеты. Мы используем несколько решений: lerna, semantic-release и собственную разработку pvm.
13. Web performance. Adopt
Скорость работы веб-приложений с каждым годом становится важнее. Скорость первоначального запуска и последующей работы интерфейса является частью UX, от этого зависит ранжирование в поисковых системах, что в совокупности влияет на бизнес-конверсии и успешность вашего продукта. Важно, чтобы скорость интерфейсов была в культуре разработки.
Если вы раньше не думали о таком нефункциональном требовании, как скорость работы интерфейса, то начните с определения бюджета скорости: задайте те ограничения на performance-метрики, за пределы которых нельзя выходить. Важно согласовать эти бюджеты с владельцем продукта, чтобы было общее понимание ценности, бюджет учитывали при постановке задач и выделяли время на улучшение скорости.
Для контроля бюджета нужно иметь мониторинг скорости работы приложения на основе данных от настоящих пользователей (RUM), желательно с автоматическими уведомлениями при достижении критических значений. Также нужно иметь синтетические тесты, которые исполняются в тестовом окружении. Желательно, чтобы такие тесты были интегрированы в процесс CI/CD: это позволит на раннем этапе замечать потенциальные проблемы и решать их до того, как они попадут к пользователям.
В нашем блоге мы подробно раскрывали тему производительности, рекомендуем ознакомиться:
Frontend-фреймворк “Angular”
Он также располагает открытым исходным кодом и оптимален для разработки одностраничных web-приложений, web-сайтов, настольных и мобильных приложений. Созданный разработчиками “Google” ещё в 2009-ом году, он построен на языке “TypeScript”, благодаря которому его функционирование отличается плавностью и высокой эффективностью.
Являясь одним из лучших фреймворков 2021-го года, он порадует целым рядом преимуществ:
- Доступность простого переноса и взаимодействия между компонентами системы за счёт интегрирования зависимостей;
- Способность самостоятельного изменения HTML-кода благодаря автоматическому считыванию изменений на уровне модели;
- Наличие интегрированной системы “REST”;
- Возможность встраивания модульных тестов и проведения тестирования;
- Простота и удобство работы с целым рядом внешних библиотек.
Что касается недостатков, то они состоят в:
- Необходимости предварительного опыта работы у программиста с “TypeScript”;
- Необходимости задействования внешних инструментов для полной индексации web-сайта;
- Замедлении работы программистов и снижении её эффективности из-за одновременной загрузки скриптов при открытии приложения.
5. GraphQL
GraphQL — это, в настоящее время, одна из самых «горячих» тем. И эту технологию, совершенно определённо, стоит освоить тому, кто собирается заниматься веб-разработкой в 2021 году. А тому, кто с ней уже знаком, стоит узнать её ещё лучше.
Технология REST долгое время считалась стандартом де-факто в деле проектирования веб-API. Она предлагает нам возможности реализации замечательных концепций. Это, например, серверы, не хранящие клиентское состояние. Но RESTful-API всё чаще выглядят в глазах современных специалистов недостаточно гибкими, не успевающими за развитием клиентских технологий.
Технология GraphQL была разработана компанией Facebook. Она нацелена на решение проблем, с которыми сталкиваются программисты, имеющие дело с RESTful-API.
Так, пользуясь RESTful-API разработчик вынужден собирать необходимые ему данные, загружая их из нескольких конечных точек, каждая из которых была создана для решения определённой задачи. Например, это такие конечные точки, как /users/_id и /tours/_id/location .
При использовании GraphQL работа строится иначе. Разработчик отправляет запрос GraphQL-серверу, описывая необходимые ему данные. Затем сервер возвращает JSON-объект, содержащий всё то, что у него было запрошено.
Ещё одно преимущество GraphQL заключается в том, что здесь используется строгая система типов. Всё, с чем работает GraphQL-сервер, описывается с использованием схемы GraphQL, при создании которой используется особый язык. После создания схемы фронтенд-разработчики и их коллеги, занимающиеся бэкендом, могут работать практически независимо друг от друга, так как они пользуются одними и теми же, заранее описанными, структурами данных.
Вот, вот и вот — полезные ресурсы для тех, кто хочет глубоко изучить GraphQL.
14. Snapshot-тестирование. Hold
Мы не рекомендуем snapshot-тесты компонентов, тесты, которые сверяют итоговый HTML компонентов. Наши команды постоянно сталкивались с ложными срабатываниями таких тестов, когда были изменены лишь атрибуты или другие свойства, которые не нарушали функциональность и вид компонента. При малой пользе такие тесты ухудшали Developer Experience.
Плюс, который можно отметить: snapshot-тесты довольно легко начать использовать. В остальном рекомендуем рассмотреть другие способы тестирования интерфейсов, допустим screenshot-тесты.
▍Размещение проекта на CDN
Так как для работы JAMstack-проектов не нужен сервер, весь такой проект можно хостить на CDN-ресурсах. Это позволяет добиться скорости и производительности, недоступной в других случаях.
4. Disappearing Frameworks. Assess
В категорию «Исчезающие фреймворки» попадают фреймворки, выполняющую свою полезную работу на этапе компиляции, генерируя чистый JavaScript без тяжелых абстракций наподобие Virtual DOM. Такие фреймворки максимально легковесны, и их производительность на слабом железе заметно выше.
Кандидаты в эту категорию: Stencil, Svelte, Solid и Angular Elements.
Все из перечисленных решений позиционируют себя как совместимые или имеющие возможность компиляции в Web Components. Это отличная возможность, позволяющая создавать веб-приложения на базе универсальной веб-платформы. За этой группой фреймворков нужно следить и экспериментировать с ними.
Такие фреймворки потенциально могут быть использованы в решении задачи переиспользования UI-компонентов между разными большими фреймворками, что позволит, допустим, иметь одну общую кодовую базу UI Kit.
Более подробно познакомиться с подходом Disappearing Frameworks можно в статье Питера О'Шонесси.
9. Git
Git — это современный стандарт для управления версиями кода в веб-разработке. Каждому фронтенд-инженеру просто необходимо владеть хотя бы основами Git, его базовыми концепциями и подходами к работе, используемыми в нём. Это нужно для организации эффективной работы в команде любых размеров.
Вот несколько команд Git, которые стоит знать и уметь применять:
- git config
- git init
- git clone
- git status
- git add
- git commit
- git push
- git pull
- git branch
2. Генераторы статических сайтов
Генераторы статических сайтов (Static Site Generator, SSG) объединяют в себе мощь серверного рендеринга (что важно для SEO и улучшает время загрузки страниц при первом обращении к ним) и одностраничных приложений. В наши дни SSG применяются во многих проектах, даже в тех, в которых не нужны возможности серверного рендеринга. Это объясняется тем, что решения вроде Next или Nuxt обладают множеством полезных возможностей, таких, например, как поддержка Markdown-файлов и сборщиков модулей, таких, как интеграция средств для запуска тестов.
Если вы серьёзно относитесь к фронтенд-разработке, вам следует присмотреться к следующим проектам и испытать их в деле:
-
(основан на React). (основан на Vue). (основан на React). (основан на Vue).
7. Инструменты для тестирования проектов
Коду, не покрытому тестами, не должно быть места в продакшне.
Тот, кто занимается собственным проектом, может решить, что работать над ним удобнее вообще без тестов, и будет придерживаться этой идеи. А вот в разработке крупных проектов, коммерческих, или создаваемых в масштабах некоей организации, без тестов не обойтись. Поэтому я могу посоветовать всем разработчикам включать в их проекты тесты, поступая так всегда, когда это возможно.
Существуют различные виды тестов. Например, применима такая их классификация:
- Модульные тесты — это тестирование отдельного компонента или функции в изоляции.
- Интеграционные тесты — это проверка взаимодействия компонентов.
- Сквозные тесты — это тестирование проекта как единого целого, в частности, с привлечением инструментов автоматизации работы с браузерами для тестирования взаимодействия проекта с пользователем.
Библиотека “ExtJS”
Была представлена на суд программистов в 2007-ом году и может работать абсолютно автономно. Несмотря на недостаточно высокую востребованность с вышеперечисленными фреймворками, отличается хорошей работой и позволяет оперативно создавать качественные посадочные страницы и динамические сетки для статических web-страниц.
Преимущества “SenchaExtJS” заключаются в:
- Задействовании большого количества виджетов;
- Существенном упрощении работы и возможности внесения изменений;
- Наличии надёжного сообщества с полноценным пакетом документов;
- Наличии стабильной базы проверенных компонентов интерфейсов пользователей.
- Недостаток поддержки бесплатной версии и высокий риск появления проблем с её отладкой;
- Высокая стоимость полной версии.
Исследование Stack Overflow
Сведения о веб-фреймворках и библиотеках из исследования Stack Overflow 2019 года
В исследовании Stack Overflow 2019 года можно найти сведения о популярности фреймворков и библиотек. Здесь библиотека React и фреймворк Angular занимают, соответственно, вторую и третью строчки рейтинга. В похожем исследовании 2018 года Angular был выше React. Но если рассмотреть результаты опроса профессиональных разработчиков, то и в 2019 году Angular тоже окажется выше React. А вот Vue, несмотря на то, что этот фреймворк активно развивается, находится в рейтинге лишь на седьмой позиции.
15. Cypress. Trial
В тестировании ПО рекомендуется использовать фреймворки, которые написаны на том же стеке, что и ваше приложение. Таким образом можно отойти от парадигмы, когда автотесты пишут отдельные люди, и разделить обязанность на всю команду разработки. Это ускорит качество и скорость поставки.
У нас в компании распространен ряд фреймворков для тестирования веба: Cypress, Puppeteer, Codecept и собственная разработка Eva.io. Из группы этих решений хочется выделить Cypress — он является простым инструментом, имеет обширную и качественную документацию и обладает самым хорошим Developer Experience. То, чего вам может не хватить в Cypress, — поддержка нескольких вкладок, фреймов.
▍Хранение кода проекта в Git-репозитории
У тех, кто работает с проектом, должна быть возможность клонировать его целиком из Git-репозитория, без необходимости работы с базой данных и выполнения каких-то сложных настроек рабочей среды.
3. Vue.js. Hold
Vue.js — это мощный и современный фреймворк. Если вы находитесь на этапе выбора фреймворка, то обязательно должны рассмотреть все решения из большой тройки фреймворков (Angular, React, Vue.js) и подобрать оптимальный для ваших условий.
В нашем случае в компании развита компетенция по Angular и React. Каждый фреймворк появился для решения определенных задач. Сейчас эти два фреймворка покрывают 100% наших требований к разработке веб-интерфейсов. Vue.js не принесет ощутимых изменений, нам потребуются дополнительные затраты на обучение, на адаптацию инструментов. Если взвесить все «за» и «против» внедрения нового фреймворка — «против» больше.
В этой статье обойдем стороной сравнение особенностей фреймворков.
▍Использование мгновенной инвалидации кеша
CDN-ресурс, используемый для развёртывания проекта, должен поддерживать мгновенную инвалидацию кеша. Это нужно для того чтобы новая версия сайта, после её публикации, была бы доступна клиентам.
Известные хостеры, такие, как Netlify или Zeit, поддерживают JAMstack-приложения. Большие компании используют такие приложения для того чтобы пользователям было бы комфортнее работать с их проектами.
JAMstack — это, определённо, то, с чем стоит как следует познакомиться тому, кто планирует заниматься фронтенд-разработкой в 2021 году. Вот, вот и вот — несколько полезных ресурсов по JAMstack.
Что должен учесть клиент, заказывая разработку сайта «под ключ»?
Сайт является одним из средств достижения цели, нередко – ключевым в маркетинговой стратегии по поиску потенциальных клиентов/покупателей. Эта статья посвящена взаимодействию клиента и агентства
8. Чистый код
Способность писать чистый код — это весьма полезный навык, востребованный многими организациями. Если вы хотите продвинуться по карьерной лестнице, то вам просто необходимо освоить концепции создания чистого кода.
Чистый код — это код аккуратный, который легко и приятно читать. Такой код направлен на решение чётко определённых задач. Чистый код поддерживают в хорошем состоянии, он качественно покрыт тестами. В нём нет дублирующихся участков, он минималистичен в плане использования классов, методов и функций.
Вот некоторые рекомендации для того, кто стремится писать чистый код:
- Создавайте осмысленные имена переменных, классов, методов и функций.
- Функции должны быть небольшими, они должны иметь лишь необходимый минимум аргументов.
- Нужно стремиться к тому, чтобы код объяснял бы себя сам, не нуждаясь в комментариях.
Как сделать ТЗ на разработку сайта, чтобы оно сработало?
Закон подлости – один из самых известных и, пожалуй, единственный из всех, который работает на совесть. Кому-то даже кажется, что по отношению к ним он дышит особенно неровно, создавая те-самые ситуации, в которых то, что-то могло дать сбой.
Любой, кто начинает карьеру в сфере разработки программного обеспечения, скорее всего столкнётся с задачей выбора первого языка, фреймворка или набора инструментов. Уверен, каждому из вас это знакомо. Ответ на вопрос о том, что нужно изучать самым первым, найти не так уж и просто. Всё дело в том, что в индустрии программирования существует очень много языков и вспомогательных инструментов. Для того чтобы облегчить выбор инструментов тем программистам, которые нацелены на фронтенд-разработку с использованием JavaScript, я решил рассказать о трёх популярных JS-инструментах.
Речь пойдёт об Angular, React и Vue. Сначала я приведу материалы некоторых исследований, что поможет нам понять «расстановку сил» на арене современной веб-разработки. А потом расскажу о преимуществах и недостатках этих инструментов.
10. Trunk based development (TBD). Assess
TBD — это модель ветвления, которая диктует частые интеграции и отсутствие долгоживущих веток. Для реализации этих требований должны быть развиты процессы и инфраструктура разработки.
В TBD ветки с новым кодом вливаются в основную ветку не реже чем раз в 24 часа. С помощью этого команда получает ускоренный цикл обратной связи по задаче. В более распространенных моделях ветвления изменения дольше копятся, часто в момент попадания изменений в основную ветку объявляются неожиданные проблемы, исправление которых несет дополнительную сложность из-за позднего времени их обнаружения. В TBD все изменения делаются максимально атомарными, интегрируются с самой новой версией основной ветки как можно чаще, что создает определенные требования к архитектуре приложения, такие как поддержка Feature Flags, чтобы иметь возможность отключать из исполнения еще не завершенные задачи.
Частые интеграции с основной веткой требуют хорошего покрытия автоматизированными тестам. Если автоматизированное тестирование прошло ложно-успешно и некоторая функциональность сломалась, то команда, работающая над другими задачами, это заметит на раннем этапе, и исправления будут внесены быстро. Совместно с TBD ценность парного программирования возрастает за счет важности код-ревью прямо в моменте создания кода и стремления выявить ошибки в коде на ранних этапах. При использовании TBD участники команды лучше видят, кто над чем работает, а не ждут крупного логического этапа для ревью.
Модель TBD является более командной за счет атомарных изменений короткими циклами, что позволяет выявлять проблемы на самом раннем этапе работы, что в сумме повышает эффективность команды. TBD хорошо приживется в командах со зрелой инженерной культурой.
Коротко о самых популярных фреймворках JavaScript
В течение последних пяти лет востребованность frontend-фреймворков JavaScript становилась всё выше и выше. Статистика выявила один забавный факт, связанный с этим: в конце года спрос резко уменьшается, но возвращается на прежний уровень уже в январе следующего года. В течение последних годов в поисковой системе “Google” чаще всего искали библиотеку “React”, второе место было отведено “Angular”, третье же – “Vue”. Подтверждение данной информации можно увидеть на платформе разработчиков “StateofJS”. Лишь один раз за последние несколько лет он разделил 1-ое место с “Vue”, а вот востребованность “Angular” за последние годы продолжает снижаться. Ниже приведён перечень самых популярных фреймворков 2021-го года:
- Первое место – “React”;
- Второе место – “Angular”;
- Третье место – “Vue”;
- Четвёртое место –“Backbone”;
- Пятое место – “Ember”.
В то же время стоит отметить, что этот список фреймворков 2021-го года будет не совсем полным, если не упомянуть о:
- Библиотеке “Ext JS”;
- Компиляторе “Svelte”;
- Библиотеке “Preact”.
3. JAMstack
Термин «JAMstack» включает в себя сокращённые наименования следующих технологий:
Хотя в тех технологиях, которые упоминаются в слове «JAMstack», нет ничего нового, они, объединяясь, дают нам новое качество, присущее им всем. А именно — независимость от веб-серверов. Поэтому, например, монолитное приложение, основанное на Ruby или на Node.js, или сайт, построенный на базе серверной CMS, вроде Drupal или Wordpress, это — не те проекты, которые соответствуют идеологии JAMstack.
Вот некоторые рекомендации, которые стоит учитывать тем, кто решил пользоваться JAMstack.
4. Прогрессивные веб-приложения
Прогрессивные веб-приложения (Progressive Web Application, PWA), несомненно, будут играть заметную роль в 2021 году. Всё больше и больше компаний, при разработке мобильных проектов, выбирают именно PWA, а не нативные приложения. Пользователи, работающие с такими приложениями, могут применять все продвинутые возможности современных технологий.
Среди сильных сторон PWA можно отметить следующие:
- Надёжность — быстрая загрузка, возможность работать без подключения к интернету.
- Скорость — плавные анимации, быстрая реакция на воздействия пользователя.
- Привлекательность — они вызывают у пользователей те же ощущения, что и нативные приложения, они обеспечивают отличный пользовательский опыт.
Вот несколько причин выбора PWA в качестве базы для разработки мобильных проектов:
- PWA можно добавить на домашний экран с веб-страницы, просматриваемой в браузере.
- Эти приложения могут работать даже без подключения к интернету.
- Они поддерживают push-уведомления, что расширяет их возможности по взаимодействию с пользователями.
- При разработке таких приложений их можно оптимизировать, ориентируясь на отчёты Google Lighthouse.
Данные проекта NPM Trends
Сравнение React, Vue и Angular с использованием проекта NPM Trends
Вышеприведённый график построен с использованием возможностей проекта NPM Trends. Здесь показано изменение количества загрузок соответствующих пакетов с течением времени. В частности, на нашем графике представлены данные за 6 месяцев 2020 года. Тут хорошо видно то, что React, по исследуемому показателю, значительно обходит конкурентов. А количество загрузок Vue, с другой стороны, постепенно растёт и сейчас находится в районе полутора миллионов.
NPM Trends позволяет анализировать не только количество загрузок пакетов из NPM, но и данные соответствующих проектов, взятые с GitHub. На следующем рисунке показаны сведения о репозиториях интересующих нас фронтенд-инструментов.
Сведения о репозиториях React, Vue и Angular
Frontend-фреймворк “Backbone”
В основе данной библиотеки лежит такой шаблон проектирования, как “MVP”. Она была создана в 2010-ом году и станет оптимальным вариантом для разработчиков, которые создают одностраничные сайты. Отличительные особенности, за которые её ценят программисты:
- Лёгкость освоения даже новичками в сфере программирования;
- Удобство разработки мобильных приложений;
- Совместимость с RESTAPI и полноценная синхронизация между backend- и frontend-фреймворками;
- Плавность и высокая скорость работы;
- Наличие более ста рабочих расширений для пользователей;
- Высокая отзывчивость и моментальная доступность изменений кода в приложении.
Что касается недостатков, то они относятся к:
- Необходимости задействования вспомогательных расширений и плагинов для написания более сложных приложений;
- Малый размер, который хоть и является преимуществом, но требует добавления “jQuery” для полноценного использования библиотеки;
- Отсутствие уже готовых структур.
Frontend-фреймворк “Vue”
Ещё один веб-фреймворк с открытым исходным кодом, входящий в топ 2021-го года. Создан разработчиком “Google” и представлен на суд широкой публики в 2014-ом году. За период своего существования пережил несколько обновлений, отличается возможностью легкой интеграции в проекты с задействованием других библиотек “JS”.Его преимущества неоспоримы:
- Универсальность и способность функционировать как JS-framework и сочетать в себе такие инструменты, как “Ember”, “Angular”, “React”;
- Наличие серверного рендеринга на основе “React” и “Angular”;
- Лёгкость по сравнению с целый рядом предшественников;
- Работа, построенная на концепции программирования виртуальной DOM и использования двухсторонней привязки;
- Обеспечение высокой производительности и максимальной эффективности не только одно-, но и многостраничных сайтов;
- Интуитивная понятность функций фреймворка и простота его синтаксиса, облегчающая работу с ним тех, кто делает первые шаги в программировании;
- Поддержка «пластичности» программирования благодаря понятному и читабельному коду;
- Поддержка применения машинописного текста.
Что касается недостатков, то они – следующие:
- Недостаток поддержки и недостаточно большое сообщество;
- Чрезмерно большое количество компонентов;
- Отсутствие перевода целого ряда новых плагинов, написанных на китайском языке.
▍Применение атомарного развёртывания проектов
Для того чтобы избежать проблем, связанных с тем, что при развёртывании проекта, состоящего из сотен или тысяч файлов, некоторые клиенты одновременно используют файлы из разных версий проекта, применяется схема атомарного развёртывания проектов. Она заключается в том, что перед переводом обновления в рабочее состояние ждут полной готовности всех материалов.
Обзор других backend-framework’ов JavaScript
Выше мы уже упомянули об этих фреймворках, а теперь ознакомимся с их преимуществами и недостатками.
6. Редакторы кода и IDE
В 2021 году, как и в 2020, первое место среди редакторов кода, используемых во фронтенд-разработке, будет принадлежать Microsoft VS Code.
Этот редактор даёт программисту возможности, сравнимые с возможностями полномасштабных IDE. Это, например, автозавершение ввода и подсветка синтаксиса. Умения этого редактора можно практически безгранично совершенствовать, используя огромное количество созданных для него расширений.
Эти расширения публикуют на специальном ресурсе. Существование этой площадки представляет собой один из важных факторов привлекательности VS Code. Вот некоторые хорошие расширения, которые пригодятся фронтенд-разработчику:
- JavaScript (ES6) code snippets
- npm
- Prettier
- CSS Peek
- Vetur
- ESLint
- Live Sass Compiler
- Debugger for Chrome
- Live Server
- Beautify
11. Общий монорепозиторий. Hold
Будем считать, что общий монорепозиторий — это глобальный репозиторий уровня компании или направления. Группы людей, работающие в таком репозитории, практически не связаны общими целями и могут иметь разные процессы.
С другой стороны — репозиторий уровня команды, где все участники репозитория объединены общими целями, имеют единые процессы, бизнес-контекст. В таком репозитории может находиться код нескольких приложений или пакетов, если над ними работает одна команда. Формально репозиторий останется моно, но меньшего масштаба. Все внешние зависимости, например core-код-компании, должны подключаться через пакетные менеджеры с версионированием.
Из плюсов глобальных репозиториев — возможность быстрее внедрять сквозные изменения, затрагивающие все команды. Из минусов — вероятна сложная модель ветвления, риск получить сильно связанный код, конфликты кода от разных команд.
Если у вас нет планов использовать глобальный монорепозиторий, то ограничьтесь репозиториями уровня одной команды и разделяйте репозиторий, когда текущая команда растет. В других случаях инвестируйте в инфраструктуру и инструментарий вокруг репозитория, чтобы поддерживать работу с глобальным репозиторием на эффективном уровне.
7. Dependency Injection. Adopt
Мы рекомендуем использовать паттерн DI и вместе с ним IoC-контейнеры. Кажется, что DI не сильно распространен во фронтенд-разработке за пределами Angular, но у нас в компании этот паттерн получил широкий охват, в том числе на проектах с React, где мы используем собственный фреймворк Tramvai.js, который построен на DI.
Этот паттерн позволяет уменьшить связанность вашего кода, за счет этого повышается поддерживаемость и расширяемость кодовой базы. При использовании DI зависимости передаются явно, модули зависят от абстракции, а не от конкретной реализации. Как пример, при таком подходе можем проще тестировать компоненты, легко подменяя имплементации зависимостей на необходимые при тестировании.
Нужно понимать, что DI повышает порог входа в проект. В некоторых случаях, особенно если у вас множество простых и уникальных задач, когда меньше возможности что-либо переиспользовать, смысл использовать DI уменьшается.
Наш коллега Сергей Нестеров сделал доклад Dependency injection в React-приложении — советуем посмотреть.
В завершении
Если вы решили развивать свои профессиональные знания и навыки в качестве программиста и хотите освоить новый фреймворк, решите для чего именно вам это нужно и только после этого делайте выбор. Для тех, кто только начинает в данной сфере, отличным решением станет “React”, а вот профи лучше всего обратить своё внимание на “Preact”, “Svetle” и “ExtJS”. Изучая их и принимая участие в их развитии, вы сможете сделать серьёзный вклад и помочь новому поколению программистов.
Не стоит забывать о том, что библиотеки JS постоянно пребывают в стадии развития и предлагают всё новые и новые функции и расширения. Одни из них идеально подходят для создания посадочных страниц, другие – крупномасштабных проектов. Выбор среди них всегда зависит от задачи, которую нужно решить, и полагаться на популярность того или иного фреймворка при этом не стоит.
10. Личные качества
На развитие личных качеств часто не обращают внимания, но они очень и очень важны.
Хотя, конечно, без понимания технических вопросов фронтенд-разработчику далеко не уехать, его личные качества весьма важны в командной работе. Тому, кто серьёзно относится к построению карьеры в сфере компьютерных технологий, стремится стать «сеньором», стоит обратить внимание на развитие следующих качеств:
- Умение войти в положение другого человека.
- Навыки коммуникации.
- Умение работать в команде.
- Готовность идти на контакт и готовность помогать другим.
- Терпеливость.
- Широта взглядов.
- Способность решать проблемы.
- Ответственность.
- Креативность.
- Умение управлять временем.
Библиотека “Preact”
Переход на неё может стать оптимальным решением для программистов, которые работают на JS, поскольку она позволяет создавать максимально адаптивные web-приложения с высокой производительностью. В то же время его использование может стать причиной утраты рядов функций фреймворка “React”.
Почему программисты выбирают данный frondend-фреймворк?
- За его лёгкость, мобильность и совместимость с “React”;
- За его высокую эффективность в создании лёгких сайтов;
- За большое количество функций.
За что они его не жалуют?
- За слишком маленькое сообщество, которое не всегда помогает оперативно решить те или иные проблемы, возникающие при использовании библиотеки;
- За доступность лишь функциональных инструментов и наличие компонента, зависящего от ES6.
5. Machine learning in Frontend. Trial
ML может применяться в задачах разработки веб-интерфейсов. Благодаря библиотеке Tensorflow, которая является одной из популярных библиотек для ML и имеет версию для Node.js и браузера, мы получаем возможность машинного обучения на известном стеке. Здесь JavaScript подтверждает свою универсальность.
Эти возможности позволяют решать задачи такими способами, о которых раньше не задумывались, но для этого необходимо теоретическое знание ML. Пример задач, где применим ML, — повышение скорости работы интерфейса.
Одна из наших команд экспериментировала и сделала сервис, предсказывающий вероятность посещения следующей страницы. Затем интегрировала этот сервис в стратегию предзагрузки одного из проектов — теперь в некоторых случаях пользователь при переходе на следующую страницу увидит ее моментально, без ожидания загрузки. Мы разработали свое решение на базе Tensorflow.js. Конкретно для этой задачи существует open-source-решение от Google — Guess.js, которое на основе данных из Google Analytics делает похожее. Советуем попробовать.
Еще из примеров использования ML в задачах фронтенда можно выделить анализ кода для выявления дубликатов, анализ верстки на соответствие гайдлайнам и даже возможность поправлять ее, распознавать документы в браузере, не передавая их по сети, генерировать пользователям индивидуально подстроенный интерфейс, повышать accessibility — допустим, голосовым управлением.
Библиотека “React”
Она предназначена для создания интерактивных интерфейсов пользователя и имеет открытый исходный код. Первый её выпуск состоялся в мае 2013-го года, и с тех пор она удерживает звание лидера. Разработчики библиотеки – “Facebook” и “Instagram”, а также сообщество индивидуальных разработчиков и компаний.
Её можно использовать для создания посадочных страниц и мобильных приложений с высокой производительностью, простотой использования и масштабируемостью, вроде “Pinterest” или “Netflix”. Одна из особенностей заключается в быстрой работе, что позволяет программистам экономить время разрабатывая при этом серьёзное ПО. Другие преимущества “React” заключаются в:
- Доступности повторного использования его компонентов в различных частях web-приложения;
- Наличии одностороннего потока информации;
- Достаточно крупном сообществе, которое обеспечивает стабильность библиотеки;
- Универсальности и возможности применения с другими фреймворками.
Что касается недостатков, то они заключаются в:
- Применении сложного расширения языка “JavaScript” – “JSX”;
- Риске влияния его динамики на SEO-оптимизацию;
- Поддержке лишь результатов внешнего пользовательского интерфейса.
2. TypeScript. Adopt
Недавно мы провели внутренний опрос фронтенд-разработчиков (как State of Frontend, только по Тинькофф), который прошли 159 фронтенд-разработчиков. В опросе была секция про TypeScript, ответы на которые дали нам уверенность, что TypeScript стал стандартом разработки фронтенда, по крайней мере в Тинькофф.
TypeScript, как язык со статической типизацией, повышает надежность и расширяемость кода. Мы получаем самодокументированный код, интерфейсы, безопасный рефакторинг, короткий цикл обратной связи (узнаем об ошибке в IDE, а не в браузере).
Если у вас небольшой проект, который в будущем не будет развиваться, «сделал и забыл», то использование TypeScript может принести накладные расходы. На дальней перспективе, когда проект будут развивать несколько поколений разработчиков, — используйте и не сомневайтесь.
В нашем блоге вы можете найти пару полезных статей про TypeScript:
Читайте также: