- что входит в стандартный набор возможностей React.js;
- можно ли с помощью этого построить сложное приложение;
- композиция против наследования;
- функциональное программирование — это легко или сложно?
- что такое Redux, и зачем он нужен.
В конце урока разработали небольшое веб-приложение на ReactJS. Вебинар провел Никита Овчинников, инженер-программист с более чем 8-летним опытом коммерческой разработки.
Что такое React?
Ответ на этот вопрос вы увидите, открыв официальный сайт, где написано, что React — это JavaScript-библиотека для построения юзер-интерфейсов.
Здесь же вы найдёте замечательный туториал, изучив который, вы сможете использовать этот фреймворк сразу после прочтения. При желании посмотрите туториал и на русском языке, но делать этого не рекомендуется. Если уж совсем плохо с английским, всё равно открывайте оригинальную английскую версию и используйте Google-переводчик. Дело в том, что официальные русскоязычные источники иногда отстают в плане перевода (бывает, что документация обновилась, а перевод ещё нет).
Почему React такой популярный?
О популярности React говорит, например, статистика за последние 6 месяцев, если не считать характерного проседания в зимние праздники:
Неплохие результаты показывает и следующая статистика:
Конечно, статистика — это ещё далеко не всё, но тем не менее по выборке мы видим, что популярность высока, и она только увеличивается.
Почему же React завоевал такую популярность? На это есть ряд причин:
- он действительно очень хорошо документирован:
— вот туториал;
— вот руководство для начинающих.
Впрочем, сегодня фреймворк не станет популярен, если он плохо документирован; - React можно использовать на любом устройстве. Однако здесь тоже следует заметить, что сегодня практически любой фреймворк можно использовать на любом устройстве. Но более реальные преимущества у нас пойдут ниже;
- фреймворк работает декларативно, его главные фишки — композиция и компонентный подход к разработке. Достаточно вспомнить тот же JSX, который в своё время очень хорошо зашёл, да и сейчас он весьма популярен;
- работу с фреймворком легко начать. Так-то оно так, но тут следует добавить, что начать, может, и легко, но развиваться сложно, то есть добиться серьёзных успехов в освоении не так уж и просто, что надо учитывать;
- вы получаете полную свободу действий. Фреймворк очень демократичен и не диктует вам никаких правил. Вы можете использовать любую библиотеку, вы вправе выбирать тот инструмент, который вам ближе, вы можете использовать что угодно и когда угодно. Этим React выгодно отличается от того же Angular;
- в вашем распоряжении продвинутые инструменты отладки (react-developer-tools, redux-dev-tools);
- мир React чрезвычайно многообразен, в нем много готовых примеров и библиотек, что не может не радовать.
Просто ли выучить React?
Итак, знакомьтесь — слабость №1: React выучить совсем непросто. И вот почему:
1. React — это совершенно другой образ мышления. Если вы с ним работаете, вам действительно нужно перестроиться. В React, в отличие от других фреймворков, есть только понятие композиции. Ребята из Facebook спроектировали свой фреймворк таким образом, что в нём нет никакого наследования. И эти же ребята из Facebook вполне логично объяснили такое положение вещей:
«At Facebook, we use React in thousands of components, and we haven’t found any use cases where we would recommend creating component inheritance hierarchies».
Собственно говоря, это заявление небезосновательно, ведь в ООП есть, разумеется, много известных проблем, например, избыточное количество абстракций. К тому же, не все разработчики являются сторонниками построения невероятных цепочек наследования и вот этого всего, хотя, конечно, где-то наследование и нужно, и полезно.
2. Второй момент, усложняющий изучение React, связан с тем, что в нем есть только рекомендации, и нет жесткого набора правил. Мало того, при изучении фреймворка это ещё терпимо, но когда вы попадете на реальный проект, вы очень сильно удивитесь. Дело в том, что нет двух одинаковых проектов в React, и в каждой компании проект с React абсолютно индивидуален. Вы привыкаете к одной ситуации, а потом переходите в другую команду и видите, что там всё по-другому: другие библиотеки, другие правила… И снова надо подстраиваться и адаптироваться. Как говорится, за гибкость надо платить.
3. Третья сложность изучения — для успешного освоения React разработчику нужно иметь высокий уровень. Нет, сам по себе React простой и писать на нём просто. Но для того, чтобы сделать на нём что-то более-менее сложное, нужно иметь хорошие скиллы программирования. При наличии пробелов в фундаментальных знаниях JS и TS, вам будет довольно сложно, и вы не всё будете понимать.
Проблема выбора
Теперь поговорим про слабость № 2 — проблему выбора. Речь идёт о многообразии, в котором легко потеряться. Тут действительно очень много всего. Появились недавно хуки — начался разговор про то, что классы больше не нужны, начались батлы React Hooks vs React Class… Все кинулись использовать хуки, а потом, сказали, что не всё понятно и вернулись к использованию классов и т. д. и т. п…
Собственно говоря, правильного ответа на вопрос «React Hooks или React Class» не существует. Или, если быть точнее, правильный ответ зависит от условий, в которых вы этот вопрос задаете.
Возникает другой вопрос: «Чем проверять типы»? Смотрите у нас есть:
И тут у нас снова проблема выбора, которая, если честно, иногда выбивает из колеи. Разумеется, всё очень вариативно, и в процессе работы с какими-то решениями вы встретитесь, а с какими-то не «увидитесь» никогда. Всё зависит от ситуации.
Опять же, есть Create React App, Webpack.js и Babel, поэтому, как только вы начнете, у вас и здесь возникнет вопрос, а что использовать?
Следующие муки выбора связаны со State. Есть Redux и есть MobX, а внутри Redux есть ещё redux-saga и redux-thunk. И тяжело, не попробовав, осознать, что же лучше использовать в конкретной ситуации.
Кроме того:
1. Router. Существует порядка пяти, вот самые популярные:
2. CSS-IN-JS. В рамках этого, весьма хорошего, кстати, подхода, тоже есть выбор:
Если подвести краткий итог, то можно перечислить следующие минусы React:
- Высокий порог вхождения. Без притворства скажем, что изучить React, всё же, тяжеловато. В том числе и из-за очень большой инфраструктуры.
- Много времени на изучение. Раз изучить непросто, будьте готовы потратить на это время — иначе никак. Нужно же понять, что к чему.
- Очень большое разнообразие, в котором легко потеряться. Тут и добавить нечего.
Что значит «много времени на изучение»? На самом деле, если вы берёте какую-нибудь технологию, то, как бы вам мягко не стелили с точки зрения маркетинга, не верьте словам в стиле «Вы научитесь всего за два коротких урока» — это всё ерунда, и не работает в реальном мире. Банально, но факт: для того чтобы стать в чём-то по-настоящему хорошим специалистом, надо потратить много времени. А для того, чтобы просто начать что-то делать, времени много не надо.
В чём сила, брат?
Несмотря на всё вышесказанное, React — очень сильная технология. Во-первых, если вы профессионал, работу будет найти очень легко. Скорее, будет сложно от нее отказаться, потому что предложений на рынке сейчас очень много:
Следующий плюс — множество готовых библиотек и решений. Об этом говорит тот же скриншот из GitHub (существует более миллиона репозиториев):
Стоит вам только подумать, что неплохо было бы «запилить эту штуку», как окажется, что она уже кем-то сделана. Технология действительно очень популярна.
Кроме того:
- Многообразие — это проблема для новичков, а для профи это плюс!
- React содержит огромное количество хороших решений.
- Можно разрабатывать приложения любого уровня сложности.
- Можно писать в любом стиле.
Поддержка Typescript
В React есть просто замечательная поддержка Typescript. Этот язык хорош хотя бы потому, что с его помощью можно писать типы, которые реально работают и реально помогают. И с Typescript вы сможете написать действительно сильную систему типов. По сути, сейчас Typescript — это стандарт, и этот стандарт есть в React. Безусловно, вы можете его не использовать, отдав предпочтение JavaScript. Однако без Typescript сделать что-то вменяемо сложное очень тяжело, ведь без строгих типов очень сложно работать. Так же тяжело предсказать, как будет вести себя ваше решение без строгих типов. Это сложно сделать даже с типами, а без них уж совсем грустно…
В общем, обязательно поработайте с Typescript, т. к. это очень нужная технология:
— https://www.typescriptlang.org/docs/handbook/react-&-webpack.html.
Парочка советов
Напоследок, хотелось бы дать несколько рекомендаций. Сегодня много говорят про ООП, и вы без труда найдёте огромное количество информации на эту тему. И везде вам в миллионный раз напишут про базовый класс Animal, а от него — про Cat и Dog. Или про базовый класс Car, а от него — Ferrari и BMW. И вот это вот всё вам будут показывать из раза в раз и из одного учебника в другой, в то время как ваш уровень разработчика при этом будет расти со скоростью улитки.
В то же самое время явно недостаточно внимания уделяется именно функциональному программированию, понимание которого реально прокачает ваши скиллы. Если вы действительно научитесь правильно и грамотно его использовать. Одна из самых адекватных книг на сегодняшний день находится в свободном доступе здесь и настойчиво рекомендуется к прочтению:
Почему сложно изучить функциональное программирование? Потому что очень часто книги перегружены математикой, академической сложностью и т. п. После этой же книги у вас всё получится, т. к. она просто замечательная.
Почему ещё функциональное программирование важно? Потому что, такая штука, как Redux, строится на базовых основах функционального программирования. И освоив хотя бы базовое функциональное программирование, вы действительно начнете писать код намного лучше. Главное — правильно всё понять.
Второй момент, о котором хотелось бы поговорить — это архитектура. Архитектура наше всё! Есть очень хорошая архитектурная парадигма, называемая Ducks. Это именно про то, как строить React- и Redux-приложения. Эта архитектура стоит того, чтобы её рекомендовать для практического применения.
Сама идея очень интересная и представляет собой набор строгих и в то же время классных правил, которые позволят сделать структуру вашего решения понятной и читаемой. Это не лонгрид, поэтому достаточно один раз прочитать и понять содержимое. После этого вы сможете нормально организовывать ваши приложения. Ссылка прилагается.
Итог
- Кто бы что не говорил, React имеет высокий порог входа. Даже имея несколько лет опыта JavaScript-программирования, готовьтесь к тому, что будет сложно, и появится много вопросов.
- React предоставляет очень большие возможности. Но о плюсах уже говорили много, поэтому повторяться не будем.
- Если интересуетесь историей развития React, вот вполне годный Roadmap.
На этом всё. Если интересует практическая часть урока, смотрите вебинар с этого момента. Будет разработано небольшое тестовое веб-приложение на ReactJS, код которого доступен на GitHub.
ссылка на оригинал статьи https://habr.com/ru/company/otus/blog/494476/
Добавить комментарий