СберМаркет, Москва – Кодим будущее доставки товаров / Статьи / Хабр

sber blog Новости

Что такое компоненты фронтенд и зачем они нужны

HTML-теги

— условно «нулевой» уровень компонентов. У каждого из них свои функции и назначение.

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

Правила, применяемые к CSS-классам, а также любым другим элементам, например HTML-тегам, позволяют централизованно задавать и изменять правила отображения любого количества однотипных элементов. Есть разные инструменты для работы со стилями элементов — собственно CSS, Sass, LESS, PostCSS, и методологии применения стилей — БЭМ, SMACSS, Atomic CSS, CSS Modules, Styled components.

Собственно компоненты — это:

Сейчас развивается технология Web Components, которая позволяет делать кастомные HTML-теги, включить в верстку шаблонные куски кода. Однако компоненты стали широко применяться благодаря современным фреймворкам фронтенд-разработки, таким как Angular, Vue, React. Возможности JavaScript позволяют легко подключить компонент:

import {Header, Footer} from "./components/common";
render() {
    return (
       ...
   )
}

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

Стоит помнить не только о написании кода, но и его поддержке. Простым copy/paste однотипной верстки и изолированием стилей в CSS-классах можно какое-то время создавать отображение без особых рисков. Но если к каждому из элементов добавляется логика поведения, написанная на JS, выгоды от переиспользования кода ощущаются буквально со 2-3 элемента, особенно когда дело касается поддержки и модификации ранее написанного кода.

Что в итоге у нас получилось

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

Статистика показывает, что эффективность работы за два года выросла более, чем в три раза. Проекты, на которые мы раньше тратили 4-6 месяцев, теперь мы делаем за 1-2 месяца (речь идёт о фронтенд-части).

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

Я уже приводил список задач, которые решали разработчики два года назад:

  • определение архитектуры, подбор технологий/инструментов;
  • создание каркаса приложения, сборка;
  • создание и настройка общих механизмов: обработка ошибок, модальные окна, уведомления, маршрутизация, запросы к серверу;
  • определение набора элементов интерфейса;
  • поиск/создание, настройка, стилизация компонентов интерфейса с нужными функциями;
  • обработка форм, валидация;
  • вёрстка;
  • реализация функционала по заказу клиента (бизнес-логика);
  • ревью кода;
  • ведение документации.

Из них в нашей компании на сегодняшний день разработчики занимаются только последними тремя:

Остальное уже решено в шаблоне приложения и библиотеке компонентов.

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

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

С пожеланиями эффективности и до новых встреч!

. Изучение фреймворка/UI-библиотеки

React, Angular или Vue? На 2020 год основная борьба идет между этими библиотеками. Вы можете выбрать любую из них. Если вам симпатизирует какая-то конкретная компания, в которой вы хотели бы работать, можете выбрать используемый ими фреймворк.

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

Начните изучать React с официальной документации, она достаточно подробная. Если её вам покажется недостаточно, можно найти на Udemy полноценный курс (например, Modern React and Redux — на английском языке, с очень понятным и подробным объяснением для начинающих, практическими заданиями и всем необходимым материалом по React и библиотекам).

Уделите внимание описанию типов входных параметров для React-компонентов (проверка типов с помощью PropTypes), а также написанию комментариев по стандарту JSDoc (цикл статей по использованию JSDoc).

По мере вашего продвижения необходимо будет научиться управлять состоянием приложения. Библиотеки, которые помогают в этом: Redux и Mobx. Начать рекомендую с Redux — это наиболее популярная библиотека в связке с React. Ознакомьтесь с официальной документацией или переводом. Также советую курс от одного из авторов библиотеки (Getting Started with Redux от Дэна Абрамова).

Затем приступайте к изучению библиотеки для удобного выполнения асинхронных действий (например, запросов к серверу). Самая простая библиотека, с которой стоит начать — Redux Thunk (документация).

Безграничный разум (джо боулер) — купить в мифе

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

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

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

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

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

Библиотека компонентов на angular: как работает

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

В комментариях под той статьей нам посоветовали локальный npm-регистр пакетов verdaccio. Мы развернули его локально, с авторизацией через GitLab. Жить стало проще: можно пользоваться всеми фишками версионности. И скрипт публикации был переписан.

При публикации в verdaccio мы смотрим на бранч, из которого происходит публикация, если это не master, то в момент публикации к версии добавляем суффикс «dev-текущая дата и время» (например 1.0.0-dev12.12.2022). В package.json в репозитории версия остается без префикса.

Требования к добавлению компонентов в библиотеку просты, это тесты демо-страница. Для быстрого добавления компонентов в библиотеку у нас есть скрипт на plop, который генерирует шаблон демо-страницы и добавляет его в демо-приложение. Разработчику остаётся только сделать пример UI-компонента с описанием API.

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

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

Как делать не стали


После того как мы обозначили граничные условия, расскажем, какие существующие решения мы анализировали.

Программирование на JSON

Логику проще описать императивно кодом, чем выдумывать (и изучать!) новый декларативный язык, который всегда будет ограничен сильнее, чем родной язык платформы. Кроме этого, надо предусмотреть песочницу, обработку ошибок, какой-то этап пилотирования – псевдокод должен постепенно распространяться на пользовательские устройства и при любых сбоях откатываться назад. Всё это усложняет разработку без ощутимых преимуществ.

CSS 3000

Не используем описание стилей компонентов, поскольку они могут разниться от форм-фактора, платформы и даже режима работы (портретная/ландшафтная ориентация, responsive в web). Декларации стилей в конечной реализации всегда будут качественнее, ближе к реальности и корректнее работать с краевыми случаями.

Фиксация модели данных в интерфейсе приложения

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

Невозможно повторно использовать код. Сложно поддерживать.Единственное, почему стоит выбирать такой способ на своем проекте, – уверенность на 99%, что API не будет меняться. Ну или если проект совсем небольшой и проектировать API дороже, чем быстро переделать пользовательский интерфейс под изменения в API.

Стили

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

В этом варианте становится возможно управлять отображением отдельных элементов, но повышается сложность реализации связанности между разными полями. И главное – с ростом вариативности UI у вас будет постоянная необходимость расширять протокол API.

JSON API

У JSON API детально описаны рекомендации по структурированию данных и описанию взаимосвязей между ними, но нет ничего, что могло бы описывать представление. Наша задача затрагивает в том числе визуальное расширение – добавление новых полей ввода, так что такой вариант нам не подходит.

Web Components / React Components API

Концепция веб-компонентов, которая в том числе значительно повлияла на API компонентов React, нам подходит уже намного лучше: с одной стороны, у нас есть контроль за отображением, с другой стороны – есть возможность привязывать данные к элементам UI.К сожалению, всё слишком сильно завязано на HTML CSS JS. Напрямую не используешь, но запомним – потом пригодится.

Как изменить себя и мир к лучшему. 99 книг библиотеки сбера в одном томе. том 1. 7 навыков высокоэффективных
людей. мощные инструменты развития личности. стивен кови

  • Обращение Германа Грефа к читателям
  • Том 1.
    7 навыков высокоэффективных людей. Мощные инструменты развития личности. Стивен Кови
  • Том 2. От хорошего к
    великому. Почему одни компании совершают прорыв, а другие нет. Джим Коллинз
  • Том 3. Жалоба –
    это
    подарок. Обратная связь с клиентом – инструмент маркетинговой стратегии. Джанелл Барлоу, Клаус
    Мёллер
  • Том 4. Дао Toyota.
    14
    принципов менеджмента ведущей компании мира. Джеффри Лайкер
  • Том 5. Искусство
    результативного управления. Ларри Боссиди, Рэм Чаран
  • Том 6. Развитие
    лидеров.
    Как понять свой стиль управления и эффективно общаться с носителями иных стилей. Ицхак Адизес
  • Том 7. Управление
    стрессом. Как найти дополнительные 10 часов в неделю. Дэвид Льюис
  • Том 8. Когда гений
    терпит поражение. Взлет и падение компании Long-Term Capital Management. Роджер Ловенстайн
  • Том 9. Догнать
    зайца. Как лидеры рынка выигрывают в конкурентной борьбе и как великие компании могут их настичь. Стивен
    Спир
  • Том 10. 5S для
    офиса. Как организовать эффективное рабочее место. Томас Фабрицио, Дон Тэппинг
  • Том 11. Черный
    лебедь. Под знаком непредсказуемости. Нассим Николас Талеб
  • Том 12. Экономика
    впечатлений. Работа – это театр, а каждый бизнес – сцена. Б. Джозеф Пайн II, Джеймс Х.
    Гилмор
  • Том 13. Эмоциональный
    интеллект. Почему он может значить больше, чем IQ. Дэниел Гоулман
  • Том 14. Бережливое
    производство шесть сигм в сфере услуг. Майкл Джордж
  • Том 15. Менеджмент.
    Природа и структура организаций глазами гуру. Генри Минцберг
  • Том 16. Любовь,
    любовь, любовь. О разных способах улучшения отношений, о приятии других и себя. Лиз Бурбо
  • Том 17. Не стать
    заложником. Сохранить самообладание и убедить оппонента. Джордж Колризер
  • Том 18. Викиномика.
    Как массовое сотрудничество изменяет все. Дон Тапскотт, Энтони Д. Уильямс
  • Том 19. После
    меня – продолжение… Акин Онгор
  • Том 20. Рефрейминг
    организации. Компания как фабрика, семья, джунгли и храм. Ли Болмэн, Терренс Дил
  • Том 21. Управление
    результативностью. Система оценки результатов в действии. Майкл Армстронг, Анжела Бэрон
  • Том 22. Цель. Процесс
    непрерывного совершенствования. Элияху Голдратт, Джефф Кокс
  • Том 23.
    Краудсорсинг. Коллективный разум – будущее бизнеса. Джефф Хау
  • Том 24.
    Wiki-правительство. Как технологии могут сделать власть лучше, демократию – сильнее, а граждан –
    влиятельнее. Бет Симон Новек
  • Том 25. Переговоры.
    Полный курс. Гэвин Кеннеди
  • Том 26.
    Результативность. Секреты эффективного поведения. Робин Стюарт-Котце
  • Том 27. Танец
    перемен. Новые проблемы самообучающихся организаций. Питер Сенге, Ричард Росс, Смит Брайан, Джордж Рот, Арт
    Клейнер, Шарлотта Робертс
  • Том 28. Сингапур.
    Восьмое чудо света. Юрий Сигов
  • Том 29. Теряя
    невинность. Как я построил бизнес, делая все по-своему и получая удовольствие от жизни. Ричард Брэнсон
  • Том 30. Критическая
    цепь. Элияху Голдратт
  • Том 31. Deadline.
    Роман об управлении проектами. Том ДеМарко
  • Том 32. Новая цель.
    Как объединить бережливое производство, шесть сигм и теорию ограничений. Джефф Кокс, Ди Джейкоб, Сьюзан
    Бергланд
  • Том 33. Гении и
    аутсайдеры. Почему одним все, а другим ничего? Малкольм Гладуэлл
  • Том 34. Управление
    бизнес-процессами. Практическое руководство по успешной реализации проектов. Джон Джестон, Йохан Нелис
  • Том 35. Как гибнут
    великие. И почему некоторые компании никогда не сдаются. Джим Коллинз
  • Том 36. Командный
    подход. Создание высокоэффективной организации. Джон Катценбах, Дуглас Смит
  • Том 37. Поток.
    Психология оптимального переживания. Михай Чиксентмихайи
  • Том 38. Богатство
    семьи. Как сохранить в семье человеческий, интеллектуальный и финансовый капиталы. Джеймс Хьюз-мл.
  • Том 39. Лидер без
    титула. Современная притча об истинном успехе в жизни и бизнесе. Робин Шарма
  • Том 40. Победить с
    помощью инноваций. Практическое руководство по изменению и обновлению организации. Майкл Ташмен, Чарльз
    О’Райли
    III
  • Том 41. Мегапроекты.
    История недостроев, перерасходов и прочих рисков строительства. Бент Фливбьорг, Нильс Брузелиус, Вернер
    Ротенгаттер
  • Том 42. Больше, чем
    эффективность. Как самые успешные компании сохраняют лидерство на рынке. Скотт Келлер, Колин Прайс
  • Том 43. Умение
    слушать.
    Ключевой навык менеджера. Бернард Феррари
  • Том 44. Жизнь на полной
    мощности. Управление энергией – ключ к высокой эффективности, здоровью и счастью. Джим Лоэр, Тони
    Шварц
  • Том 45. Сила воли. Как развить и укрепить. Келли Макгонигал
  • Том 46. Великие по
    собственному выбору. Джим Коллинз, Мортен Хансен
  • Том 47. На этот раз
    все
    будет иначе. Восемь столетий финансового безрассудства. Кармен М. Рейнхарт, Кеннет С. Рогофф
  • Том 48. Искусство
    системного мышления. Необходимые знания о системах и творческом подходе к решению проблем. Джозеф
    О’Коннор, Иан Макдермотт
  • Том 49. Банк 3.0. Почему
    сегодня банк – это не то, куда вы ходите, а то, что вы делаете. Бретт Кинг
  • Том 50. Ускорение перемен. Джон П. Коттер
  • Том 51. Почему одни страны богатые, а другие бедные.
    Происхождение власти, процветания и нищеты. Дарон Аджемоглу, Джеймс А. Робинсон
  • Том 52. Будущее разума. Митио Каку
  • Том 53. Как работает Google. Эрик Шмидт, Джонатан Розенберг
  • Том 54. Принцип пирамиды
    Минто. Золотые правила мышления, делового письма и устных выступлений. Барбара Минто
  • Том 55. Практическая
    мудрость. Правильный путь к правильным поступкам. Барри Шварц, Кеннет Шарп
  • Том 56. Креативная
    компания. Как управлять командой творческих людей. Эд Кэтмелл, Эми Уоллес
  • Том 57. Прыгни выше
    головы! 20 привычек, от которых нужно отказаться, чтобы покорить вершину успеха. Маршалл Голдсмит
  • Том 58. Просто о больших
    данных. Джудит Гурвиц, Алан Ньюджент, Ферн Халпер, Марсия Кауфман
  • Том 59. Кратко. Ясно. Просто. Алан Сигел, Айрин Этцкорн
  • Том 60. Scrum. Революционный метод управления проектами. Джефф
    Сазерленд
  • Том 61. Взаимодействие в
    команде. Как организации учатся, создают инновации и конкурируют в экономике знаний. Эми Эдмондсон
  • Том 62. Эффективное
    правительство для нового века. Реформирование государственного управления в современном мире. Раби
    Абучакра, Мишель Хури
  • Том 63. Четвертая промышленная революция. Клаус Шваб
  • Том 64. Умные граждане – умное государство.
    Экспертные технологии и будущее государственного управления. Бет Симон Новек
  • Том 65. Открывая организации будущего. Фредерик Лалу
  • Том 66. Позитивная организация. Освобождение от стереотипов,
    принуждения, консерватизма. Роберт Куинн
  • Том 67. Выбирать сильнейших.
    Как лидеру принимать решения о людях. Клаудио Фернандес-Араос
  • Том 68. Сердце компании.
    Почему организационное здоровье определяет успех в бизнесе. Патрик Ленсиони
  • Том 69. Блокчейн. Схема новой экономики. Мелани Свон
  • Том 70. Университет
    третьего поколения. Управление университетом в переходный период. Йохан Г. Виссема
  • Том 71. Huawei. Лидерство,
    корпоративная культура, открытость. Тянь Тао, Давид де Кремер, У Чуньбо
  • Том 72. Ищи в себе.
    Неожиданный путь к достижению успеха, счастья и мира во всем мире. Тан Чад-Мень
  • Том 73. Отношение определяет результат. Дов Сайдман
  • Том 74. Синдром «шахты».
    Как преодолеть разобщенность в жизни и обществе. Джиллиан Тетт
  • Том 75. Бережливые инновации. Как делать лучше меньшим. Нави Раджу, Джайдип
    Прабху
  • Том 76. Просто об Agile. Марк Лейтон, Стивен Остермиллер
  • Том 77. Введение в критическое мышление и теорию креативности. Джо Лау
  • Том 78. Семь этюдов по физике. Карло Ровелли
  • Том 79. Лидер и племя.
    Пять уровней корпоративной культуры. Дэйв Логан, Джон Кинг, Хэли Фишер-Райт
  • Том 80. Технологии Четвертой промышленной революции. Клаус Шваб
  • Том 81. Мои годы в General Motors. Альфред Слоун
  • Том 82. Конец традиционной
    власти. Армия и церковь, корпорация и государство: что изменилось в управлении ими. Мойзес Наим
  • Том 83. Действуй как лидер, думай как лидер. Эрминия Ибарра
  • Том 84. Эмоциональная
    гибкость лидера. Как soft-навыки позволяют достигать высоких результатов. Керри Флеминг
  • Том 85. Принципы. Жизнь и работа. Рэй Далио
  • Том 86. Проект «Феникс».
    Роман о том, как DevOps меняет бизнес к лучшему. Джин Ким, Кевин Бер, Джордж Спаффорд
  • Том 87. Банковский
    менеджмент, ориентированный на доход. Измерение доходности и риска в банковском бизнесе. Хеннер Ширенбек,
    Михаэль Листер, Штефан Кирмсе
  • Том 88. Талант побеждает. О
    новом подходе в реализации HR-потенциала. Рэм Чаран, Доминик Бартон, Деннис Кэри
  • Том 89. 21 урок для XXI века. Юваль Ной Харари
  • Том 90. Как сохранить здравый ум. Филиппа Перри
  • Том 91. Agile оценка и планирование проектов. Майк Кон
  • Том 92. Платформа.
    Практическое применение революционной бизнес-модели. Алекс Моазед, Николас Джонсон
  • Том 93. Цифровая трансформация Китая. Опыт преобразования инфраструктуры
    национальной экономики. Ма Хуатэн, Мэн Чжаоли, Ян Дели, Ван Хуалей
  • Том 94. Цифровая трансформация бизнеса. Питер Вайл, Стефани Ворнер
  • Том 95. Как жаль, что мои
    родители об этом не знали (и как повезло моим детям, что теперь об этом знаю я). Филиппа Перри
  • Том 96. Безграничный разум. Учиться, учить и жить без ограничений. Джо
    Боулер
  • Том 97. Сила в спокойствии. Достижение гармонии с помощью
    трансцендентальной медитации. Боб Рот
  • Том 98. Кибербезопасность:
    правила игры. Как руководители и сотрудники влияют на культуру безопасности в компании. Эллисон Сэрра
  • Том 99. От носорога к единорогу. Как провести компанию через трансформацию
    в цифровую эпоху и избежать смертельных ловушек. Виктор Орловский, Владимир Коровкин

Как работают ui-контейнеры?


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

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

Два режима работы фрэймворка

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

Слева – как может отображаться контейнер для ввода суммы на списке из простых типов полей. Справа – если в сборке приложения есть UI-контейнер. Несмотря на то, что в режиме списка простых полей нет слайдера и есть отдельное поле вместо иконки с выбором валюты, – мы можем передать все данные с PL и процесс будет рабочим.

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

Каких правил мы стараемся придерживаться при работе с UI-компонентами:

  • Поддерживать работу функционала в режиме списка простых типов полей. У любого прикладного проекта есть соблазн превратить динамический протокол в статический. Поэтому мы всех просим сначала разработать функционал на типовом UI-контейнере, а потом обогащать UX/UI добавлением кастомных контейнеров на этой модели данных. Это не только позволит в будущем обновлять процессы на старых сборках, но и автоматически поддерживает логическую целостность API.
  • Не менять модель данных (JSON) для UI-контейнера, если он уже готов (проходит финальное тестирование или уже в продакшене). Так как логика на PL жестко связана с моделью данных, её изменение сломает функционал на версиях мобильного приложения, которые не обновляются. Тем не менее, модель можно расширять при условии сохранения обратной совместимости.
  • Называть свой UI-компонент системным именем. Так как имя UI-компонента – обязательный атрибут протокола и должен быть минимум один на каждом экране, мы ввели специальное системное имя, которые реализует простой список полей.
  • Не реализовывать бизнес-логику на UI-компонентах. Логику необходимо реализовывать на сервере, почему – писали выше.

Кто такой фронтендер и чем он занимается?

Допустим, вы хотите арендовать квартиру: у вас есть компьютер с выходом в Интернет, вы знаете адрес другого, более мощного компьютера, который хранит огромное множество объявлений. Если представить, что привычных сайтов не существует и вы не можете, например, посмотреть объявления на карте, отфильтровать ненужные, заполнив удобную форму, вам придётся самим составлять сетевой запрос и разбираться в том, как и куда отправлять данные.

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

Фронтенд-разработчиками называют программистов, которые отвечают за создание такой внешней стороны (англ. front end) веб-сайтов. Это клиентская часть сайта, с которой пользователь непосредственно взаимодействует на своем компьютере или телефоне (клиенте).

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

Фронтенд-разработчик:

  • создает пользовательский интерфейс, добавляет разметку и стили страниц сайта;
  • программирует логику, которая выполняется на клиентском устройстве, разрабатывает архитектуру клиентского приложения;
  • оптимизирует производительность фронтенда, чтобы проект быстро загружался, поисковики поднимали сайт в рейтинге выдачи, а пользователи не чувствовали задержки при навигации и взаимодействии с интерфейсом;
  • тестирует разработанную функциональность и пишет автоматические тесты, чтобы обеспечить высокое качество и не допустить ошибок при изменении кода;
  • настраивает сборку проекта, что позволяет автоматизировать дополнительную обработку кода и файлов перед запуском приложения;
  • выполняет развёртывание приложения: выкладывает на сервер, чтобы приложение было доступно в сети и пользователи могли им воспользоваться;
  • следит за возникающими ошибками с помощью средств для мониторинга и вовремя их устраняет 🙂

В разных командах фронтенд-разработчики могут решать совершенно разные задачи, например:

  • Разрабатывают клиентскую часть веб-приложения для бизнеса (то, что видят конечные пользователи, когда пользуются различными онлайн-услугами).
  • Разрабатывают библиотеку компонентов интерфейса: отдельные блоки, которые другие разработчики используют в своих проектах (например, кнопки, всплывающие окна, поля форм или элементы для графиков). Это могут быть библиотеки с открытым исходным кодом, которые подключают разработчики по всему миру, или внутренняя библиотека компонентов компании с определенным дизайном.
  • Создают технические инструменты для улучшения архитектуры приложений. Инструменты, которыми сейчас пользуются всё сообщество фронтендеров, когда-то создали другие фронтенд-разработчики, чтобы улучшить пользовательский опыт при использовании сайтов и сам процесс разработки. Вы можете стать одним из таких разработчиков!

Некоторые готовые библиотеки react-компонентов


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

  1. Material-UI — набор различных компонентов, реализующих подход к дизайну Material Design от Google.
  2. React-Bootstrap — еще одна библиотека, реализующая популярный подход к созданию и стилизации интерфейсов. Обе библиотеки имеют огромное количество последователей по всему миру и во многом схожи по устройству: обширное API использования каждого из компонентов, хорошая документация с примерами, возможность переопределять стили элементов.
  3. VKUI — библиотека компонентов сети «ВКонтакте». Она используется в сторонних приложениях VK mini apps, запускаемых внутри соцсети (см. подробный материал по VK mini apps). Стили компонентов VKUI практически неотличимы от стилей нативного приложения «ВКонтакте». Это возможность использовать «бесшовный» переход от страниц ВК к страницам вашего приложения и обратно. Вместе с библиотекой vkconnect эта библиотека — сильный инструмент для построения приложений с учетом особенностей дизайна под iOS и Android.
  4. ARUI Feather — проект React-компонентов Альфа-банка. Это библиотека типовых расширяемых компонентов, которые банк использует для разработки интерфейсов. Библиотека позиционируется как open source, каждый может стать контрибьютором.

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

Организуйте мониторинг работоспособности сервисов-партнеров

Мы занимаемся обработкой заказов от клиентов, и поэтому наши сервисы постоянно взаимодействуют со сторонними API — это шлюзы для отправки SMS, платежные платформы, системы роутинга, геокодер, служба ФНС и множество других систем. И когда нагрузка стала расти стремительно, мы начали упираться в ограничения API наших сервисов-партнеров, о которых раньше даже не задумывались.

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

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

Был принят целый ряд организационных мер и слаженная работа коллектива помогла выиграть время, пока мы договаривались о новых условиях и ждали модернизации сервисов со стороны некоторых партнеров. Существуют и другие API, которые радуют высокой выносливостью и безбожными тарифами в случае высокого трафика. Например, в начале мы пользовались одним известным картографическим API для определения адреса точки доставки. Но по итогам месяца получили кругленький счет почти на  2 миллиона рублей. После этого решили оперативно заменить его. Не буду заниматься рекламой, но скажу, что расходы наши значительно уменьшились.
СберМаркет, Москва - Кодим будущее доставки товаров / Статьи / Хабр
Вывод: Нужно обязательно мониторить условия работы всех партнерских сервисов и иметь их в виду. Даже если сегодня кажется, что они вам «с большим запасом», это не значит, что завтра они не станут препятствием для роста. И, конечно, лучше договориться о финансовых  условиях возросших запросов к сервису заранее. 

Полный список книг библиотеки сбера

Глава Сбера Герман Греф уверен, что книги — один из самых мощных инструментов развития — и для банка, и для него лично. Больше 10 лет назад он отобрал несколько книг, которые порекомендовал прочитать топ-менеджерам. С этого началась Библиотека Сбербанка — уникальная подборка лучших книг о бизнесе, мире, самосовершенствовании. С 2009 года в серии издано около 100 книг — это концентрат важнейших знаний и опыта в сфере развития бизнеса и собственного характера, построения деловых и личных отношений, формирования здорового, эффективного общества. 

СберМаркет, Москва - Кодим будущее доставки товаров / Статьи / Хабр

Мы сделали саммари на все книги, входящие в Библиотеку Сбера. Каждое саммари мы подготовили в трех форматах — текст, аудио и инфографика. Эти книги — абсолютный мастрид для любого человека, настроенного на движение и прогресс.

Серия: библиотека сбербанка | московский дом книги

Абучакра, Р.Аджемоглу, Д.Адизес, И. К.Армстронг, М.Барлоу, Дж.Болмэн, Л.Боссиди, Л.Боулер, Дж.Брэнсон, Р.Бурбо, Л.Вайл, П.Виссема, Й. Г.Гладуэлл, М.Голдратт, Э.Голдратт, Э. М.Голдсмит, М.Гоулман, Д.Далио, Р.Демарко, Т.Джестон, Д.Джордж, Л. М.Ибарра, Э.Каку, М.Катценбах, Д.Келлер, С.Кеннеди, Г.Ким, Д.Кинг, Б.Кови, С. Р.Кокс, Дж.Коллинз, Д.Коллинз, Дж.Колризер, Дж.Коттер, Дж. П.Куинн, Р.Кэтмелл, Э.Лайкер, Дж.Лалу, Ф.Лау, Дж. У. Ф.Лейтон, М. С.Ленсиони, П.Ловенстайн, Р.Логан, Д.Лоэр, Дж.Льюис, Д.Минто, Б.Минцберг, Г.Моазед, А.Наим, М.Новек, Б.Новек, Б. С.О’Коннор, Дж.Онгор, А.Пайн II, Б. Дж.Перри, Ф.Раджу, Н.Ровелли, К.Рот, Б.Сазерленд, Дж.Сайдман, Д.Свон, М.Сенге, П.Сигел, А.Сигов, Ю.Слоун, А. П.Спир, С.Стюарт-Котце, Р.Талеб, Н. Н.Тан, Ч.-М.Тапскотт, Д.Ташмен, М.Тетт, Дж.Тянь, Т.Фабрицио, Т.Фернандес-Араос, К.Феррари, Б.Флеминг, К.Фливбьорг, Б.Харари, Ю. Н.Хау, Дж.Хьюз, Дж.-мл.Чаран, Р.Чиксентмихайи, М.Шарма, Р.Шваб, К.Шварц, Б.Ширенбек, Х.Шмидт, Э.Эдмондсон, Э.

Оцените статью
Huawei Devices
Добавить комментарий