Полтора года назад меня наняли в Mathpresso в качестве ведущего фронтенд-разработчика.

Я могу работать с обычным Javascript, но я в основном разработчик React.
Несколько лет назад я запрыгнул на шумиху вокруг React и с тех пор особо не менял фреймворк.
Когда я присоединился к Mathpresso, уже было несколько внутренних инструментов, разработанных в Angular и Vue.js, но ни одного в React.
Я пробовал Angular1 и 2 назад, но с тех пор особо не проверял их (уууууу!).

Одним словом, Angular - это очень «встроенный» подход, использующий множество новых атрибутов HTML для обработки таких вещей, как условия, циклы и т. Д. React - это очень программный способ разработки веб-UI / UX с использованием JS (X) и возможно, и Vue.js находится посередине, пытаясь получить лучшее из обоих миров.

Не поймите меня неправильно, я не говорю, что одно лучше другого. Очевидно, что вам решать, какой из них использовать, в зависимости от ваших потребностей (кривая обучения, производительность, долговечность и т. Д.).

Итак, с тех пор, как я присоединился, большинство веб-проектов работают на React. От веб-представлений до более крупных веб-сайтов, где мне иногда приходилось использовать Redux, библиотеку управления состоянием, также созданную Facebook для работы с React.
А поскольку Javascript - это нетипизированный язык (ваша переменная просто переменная и может быть целым числом, строкой, массивом или объектом без явного объявления его как такового), Facebook (опять же?) реализовал Flow как свою версию проверки типов.
Angular использует Typescript, React может использовать это тоже, но Facebook создал Flow как свою собственную альтернативу.

По сравнению с Angular, React продвигает однонаправленные данные, а Redux - это реализация Flux (архитектурный паттерн однонаправленных данных, да, опять же, Facebook…).

Базовым случаем для Redux может быть то, что, возможно, вам нужно, чтобы данные были доступны и управляемы во многих местах вашего кода, но вы хотите, чтобы они были уникальными и доступными повсюду. Вы могли бы, используя только React, установить переменную состояния в корневом компоненте вашего приложения и передавать ее в качестве реквизита везде, но это было бы уродливо, неэффективно и противоречило цели наличия компонентов, которые должны обрабатывать только крошечную часть ваше приложение. Компонент должен отвечать за свое собственное состояние, получать реквизиты от родительского компонента, без необходимости изменять данные из родительского или соседнего компонента.
Еще одна интересная особенность redux - это то, что состояние фактически неизменяемо, оно не изменяется напрямую, но фактически полностью заменяется при каждом изменении.

Давайте проиллюстрируем ситуацию на простом примере.
На странице будет отображаться оверлей загрузки каждый раз, когда будет какой-либо вызов API. Для этого мы добавим в хранилище переменную загрузки. Тогда любому компоненту будет разрешено изменить статус загрузки, отправив действие setLoading (status: boolean). Затем хранилище, получающее действие, вызовет reducer, который вернет новую версию переменной загрузки.
В этом случае при запуске приложения состояние загрузки будет ложным (см. Reducer. js), но после того, как компонент приложения смонтирован, мы отправляем действие, устанавливающее для состояния загрузки значение true. Компонент приложения, подключенный к загрузочному хранилищу, получит изменение свойства и вызовет повторную визуализацию и добавит компонент загрузки в представление.

Для более сложных случаев, таких как вызовы API, вам нужно будет использовать библиотеку промежуточного программного обеспечения, такую ​​как redux-thunk или redux-saga, чтобы вы управляли обратным вызовом или асинхронностью.
В целом, это довольно прагматично, но немного тяжеловато. и требует большой настройки.
Мне нравится общая надежность, делающая код и логику более структурированными.

Недавно мы наняли кучу отличных разработчиков, в том числе веб-разработчиков (пожалуйста, подайте заявку здесь!).
Уэйн - один из них, и он показал отличные знания в области серверной и интерфейсной разработки, несмотря на свой молодой возраст (оставайтесь здесь, он мог бы написать пост ~).

По сравнению со мной, он в основном использует Typescript в качестве уровня проверки типов Javascript и MobX в качестве своей библиотеки управления состоянием. Он спросил меня, можем ли мы реализовать это для нашего нового большого проекта (платформа для разработчиков Qanda!).
В Mathpresso мы поощряем пробовать новые технологии и стек, чтобы оставаться в курсе последних событий и иметь лучшие инструменты для улучшения нашего сервиса. . Довольно часто кто-то начинает новый проект с никогда ранее не использовавшимся языком или фреймворком, и, если он удовлетворяет потребности функции, он запускается в производство без каких-либо проблем. Так что это была положительная инициатива, и мы начали перенос существующей кодовой базы на новую архитектуру.
И вот основная тема этого поста: чем MobX отличается от Redux, но как оба имеют одинаковые основные концепции.

Давайте посмотрим, как тот же код, что и выше, будет выглядеть с Typescript и MobX.

Как видите, с точки зрения структуры хранилище содержит состояние (определение и инициализацию), а также доступные действия. А поскольку состояние MobX является изменяемым, действия изменят значение непосредственно внутри состояния. Вы также можете видеть, что мы определяем одно хранилище для одной части данных (здесь загрузка), поэтому вы можете наблюдать за конкретными данными, и ваш компонент будет иметь доступ только к этому хранилищу, более модульному и имеющему определенную роль.
Код менее тяжелый и более простой в использовании, чем логика Redux. Также, поскольку Redux не обрабатывает асинхронные действия из коробки (вам нужно добавить промежуточное программное обеспечение thunk или saga), MobX реализует api под названием «поток», который делает это с помощью генераторов функций!

В качестве следующего чтения вам обязательно стоит попробовать MobX-State-Tree, так как этот слой на MobX сделает код более строгим, поскольку он будет более конкретно определять наблюдаемые вашего состояния, принудительно использовать действия для изменения состояния, версия- Определите свое состояние и т. д., это тоже мой следующий шаг!

글로벌 교육 앱 1 위 QANDA (콴다) 를 함께 만들어 갈 능력 있는 분들 을
기다리고 있습니다 !! 망설이지 말고 지원 해주세요.

자세한 사항은 채용 사이트를 통해 확인하실 수 있습니다.

# 전직 군 채용중 # мы набираем на работу # 글로벌 교육 앱