Angular прошёл долгий путь с момента появления в 2009 году. Широкие возможности фреймворка делают его одним из лучших инструментов для быстрой разработки многофункциональных и высоконагруженных приложений. Он давно завоевал признание мирового сообщества разработчиков и его выбирают для своих проектов такие лидеры своих индустрий, как Google, PayPal и Forbes.
Этот поддерживаемый Google фреймворк произвёл революцию в фронтенде, позволив быстро создавать высокопроизводительные веб-продукты. Благодаря этому многие делают выбор в пользу Angular для создания больших и сложных проектов, предпочитая его другим JavaScript-фреймворкам.
Однако популярность Angular не означает, что с ним справится любой желающий. Фреймворк требует глубоких знаний HTML, CSS, JavaScript и TypeScript, а также опыта работы с модульной архитектурой. SECL Group давно работает с Angular, в частности, это одна из наших основных технологий. Очень часто мы используем фреймворк при разработке энтерпрайз проектов, для которых быстродействие очень критично, а также для внутренних корпоративных платформ и для стартапов. Поэтому мы решили сделать подборку популярных высоконагруженных проектов, созданных с посощью Angular, чтобы показать где он используется и почему.
Высоконагруженные сайты и приложения, созданные с помощью Angular
Gmail
Google использовал Angular для модернизации Gmail в 2009 году, превратив почту в одностраничное приложение. Gmail умеет обновлять информацию о письмах без перезагрузки страницы и обеспечивает автономный доступ к кэшированным данным.
Почтовый клиент Gmail насчитывает более 1,5 миллиарда аккаунтов (на конец 2020 года). И это лучшее подтверждение мощи и надёжности Angular.
Gmail + Angular:
- удобный интерфейс;
- отличный UX;
- обновление данных без перезагрузки страницы;
- офлайн-доступ к содержимому почты;
- возможность из коробки интегрировать Google Hangouts в приложения, созданные на Angular.
Статистика и использованные технологии:
- Среднее количество посещений в месяц: 77,20 млн;
- Бэкенд-технологии: C++, Java;
- Фронтенд-технологии: Angular;
- Технологии баз данных: Cloud Bigtable.
Forbes
Сайт одного из самых читаемых финансовых журналов мира насчитывает более 100 миллионов визитов пользователей в месяц. Сайт Forbes отличается отзывчивым интерфейсом и быстрой загрузкой страниц, а статьи обновляются автоматически в течение нескольких секунд после публикации. Учитывая, что средняя месячная посещаемость сайта превосходит по количеству даже аудиторию Gmail, можно сделать вывод, что Angular отлично подходит для разработки таких высоконагруженных приложений.
Forbes + Angular:
- хорошая производительность на любых устройствах благодаря повторному использованию кода;
- непрерывный просмотр статей, которые органично появляются при прокрутке веб-сайта;
- простая поддержка и обслуживание;
- огромные возможности для роста и совершенствования.
Статистика и использованные технологии:
- Среднее количество посещений в месяц: 115,5 млн;
- Бэкенд-технологии: Java;
- Фронтенд-технологии: Angular;
- Технологии баз данных: MongoDB.
Upwork
12 миллионов исполнителей, 7 миллионов заказчиков и более 100 000 объявлений о вакансиях делают Upwork крупнейшей в мире площадкой для фрилансеров. Сайт Upwork использует Angular, чтобы обеспечить его адаптивность на различных устройствах.
Upwork + Angular:
- удобная навигация и простое взаимодействие между работодателями и фрилансерами;
- возможность интеграции сторонних сервисов;
- широкий выбор платёжных систем для перевода средств.
Статистика и использованные технологии:
- Среднее количество посещений в месяц: 35,45 млн (по данным SimilarWeb на апрель 2021).
- Бэкенд-технологии: PHP и Java.
- Фронтенд-технологии: Angular.
- Технологии баз данных: Amazon DynamoDB, Amazon RDS.
PayPal
377 миллионов активных пользователей ежедневно совершают огромное количество транзакций через PayPal. Платформа использует Angular, чтобы денежные переводы были удобными и быстрыми.
PayPal + Angular:
- проведение транзакций в несколько кликов;
- оформление заказа прямо на сайте интернет-магазина;
- открытые руководства по интеграции PayPal в веб-сайты на Angular.
Статистика и использованные технологии:
- Среднее количество посещений в месяц: 610,76 млн. (по данным SimilarWeb на апрель 2021).
- Бэкенд-технологии: PayPal был перестроен с Java на Node.js.
- Фронтенд-технологии: Angular.
- Технологии баз данных: Oracle, MySQL, HERA (собственная разработка PayPal).
JetBlue
Веб-сайт авиакомпании JetBlue позволяет пассажирам бронировать и оплачивать билеты, отслеживать рейсы, просматривать и исследовать маршруты. В год компания обслуживает более 42 миллионов клиентов. Angular позволяет сайту справляться с высокими нагрузками и обеспечивает удобный UX.
JetBlue + Angular:
- простой и удобный поиск и бронирование рейсов;
- интеграция сторонних сервисов для аренды автомобилей и бронирования жилья.
Статистика и использованные технологии:
- Среднее количество посещений в месяц: 8,09 млн. (по данным SimilarWeb на апрель 2021).
- Фронтенд-технологии: .NET.
- Бэкенд-технологии: Angular.
YouTube TV
Альтернатива традиционному телевидению, YouTube TV транслирует большинство популярных телеканалов. Платформа работает на ПК с Windows и macOS, мобильных устройствах Android и iOS, Apple TV, а также на телевизорах Smart TV, таких как LG и Samsung. Число подписчиков YouTube TV во втором квартале 2020 года увеличилось до 3,4 миллиона.
YouTube TV предлагает неограниченное хранилище и позволяет одновременно записывать неограниченное число программ. Записи могут храниться в течение девяти месяцев.
YouTube TV + Angular:
- кроссплатформенное приложение, созданное с помощью Angular;
- доступ без TV-декодеров;
- простая интеграция с продуктами телевизионных брендов.
Статистика и использованные технологии:
- Среднее количество посещений в месяц: 50,7 млн (по данным SimilarWeb на апрель 2021).
- Фронтенд-технологии: Angular
Standard Bank
Основанный в 1862 году, Standard Bank обслуживает более 12 миллионов клиентов и является крупнейшим банком в Африке. И немаловажную роль в достижении высокого уровня сервиса играет мобильное приложение. Оно работает на смартфонах, планшетах и ноутбуках и обеспечивает быстрый и безопасный доступ к банковским услугам.
Всего в несколько кликов клиенты банка могут совершать платежи, проверять баланс, осуществлять денежные переводы, вносить депозиты и контролировать свой банковский счёт.
Standard Bank + Angular:
- операции с банковскими счетами за считанные секунды;
- широкий спектр сервисов, от веб-сайта до мобильного приложения;
- работает практически на всех устройствах.
Статистика и использованные технологии:
- Среднее количество посещений в месяц: от 86,6 тыс. до 4,25 млн в зависимости от региона.
- Бэкенд-технологии: Java, PHP.
- Фронтенд-технологии: Angular.
- Технологии баз данных: Apache Derby, Azure SQL Database.
Wikiwand
Интерфейс Википедии почти не изменился с момента её создания, поэтому сегодня он может показаться загромождённым и сложным в плане навигации. Wikiwand создан, чтобы исправить эту проблему. Wikiwand — расширение для браузеров Chrome и Mozilla, которое преображает внешний вид Википедии как на ПК, так и на мобильных устройствах. Сайт Wikiwand с преображёнными страницами Википедии набирает более 25 миллионов посещений в месяц.
Wikiwand + Angular:
- разделение страниц на простые разделы для удобства чтения;
- расширенная навигация как в веб, так и в мобильных приложениях;
- привлечение более высокого трафика за счёт обновлённой версии Википедии.
Статистика и использованные технологии:
- Среднее количество посещений в месяц: 26,1 млн.
- Бэкенд-технологии: Node.js.
- Фронтенд-технологии: Angular.
Другие проекты, созданные с помощью Angular
На этом список не заканчивается. На Angular также работают Google Cloud Platform, AdWords, мобильный веб-сайт HBO, приложение Sony RS3 YouTube, веб-сайт IndieGoGo, сайт с калькулятором цен от BMW, Xbox Live, Telegram, CrunchBase и множество других веб-сайтов и приложений.
Вот краткий список проектов, которые используют Angular:
Angular имеет большой набор функций «из коробки» и отличается высоким удобством использования. Благодаря модульной архитектуре разработчики могут быстро и легко масштабировать проекты. Для написания кода применяется TypeScript, который снижает нагрузку на отладку, помечая наиболее распространенные ошибки.
Подойдёт ли Angular для моего проекта?
Angular имеет довольно широкий спектр применений, но особое внимание стоит обратить на него, если вы планируете создать:
- корпоративную систему;
- веб-сервис с личными учётными записями;
- одностраничное веб-приложение;
- интернет-магазин или торговую площадку.
Преимущества Angular:
- быстрое написание кода;
- более чистый код;
- возможность повторного использования кода;
- регулярные обновления;
- быстрое тестирование отдельных частей приложения;
- двустороннее связывание данных, мгновенно отражающее изменения состояния веб-страницы в пользовательском интерфейсе;
- высокая производительность;
- простые шаблоны;
- хорошая индексация в Google.
Что касается недостатков, Angular унаследовал проблему индексации сайтов, которая на самом деле типична для большинства JavaScript-фреймворков. Речь идёт о так называемой частичной индексации или двухволновой индексации. Проблема в том, что не все поисковые боты могут мгновенно обработать код JavaScript, и в результате сайт не может попасть в топ поисковой выдачи.
Чтобы исправить ситуацию, веб-разработчики используют решения для рендеринга, например SSG (Static Site Generation, статическая генерация сайта) или SSR (Server-Side Rendering, рендеринг на стороне сервера). Первый вариант подходит в основном для простых небольших сайтов без бэкенда, поэтому для крупных проектов мы рекомендуем SSR-рендеринг. Инженеры SECL Group применяют его ко всем проектам на Angular для быстрой индексации и ускоренной загрузки страниц.
Итог
Мы искренне верим, что Angular — образцовая технология для корпоративных платформ, где высокая производительность и скорость имеют значение. Вышеперечисленные примеры – лучшее тому подтверждение. Солидный опыт разработки проектов на Angular и понимание всех тонкостей фреймворка позволяет нам по максимуму использовать его положительные стороны и нивелировать недостатки.
*Количество посещений указано по данным SimilarWeb на апрель 2021, если иное не указано в примечании.
P.S. Давайте дружить в Facebook, Twitter и LinkedIn