Маршрутизация React и в других JS-фреймворках возможные проблемы и их решения

Содержание материала:

Работа с JSX в фреймворке React

Учебник по React

  • Урок №
    Учебник по React
    для новичков по-русски
  • Урок №
    Работа с JSX
    в фреймворке React
  • Урок №
    Работа
    с состояниями и событиями
  • Урок №
    Работа
    с if и циклами
  • Урок №
    Продвинутая
    работа с циклами
  • Урок №
    Работа
    с формами
  • Урок №
    Продвинутая
    работа с формами
  • Урок №
    Практика
    по работе с формами
  • Урок №
    Работа
    с компонентами
  • Урок №
    Продвинутая
    работа с компонентами
  • Урок №
    Практика
    по фреймворку React
  • Тут будут еще уроки
    появятся в августе-сентябре.

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

На чем мы закончили

Давайте вспомним, на чем мы закончили предыдущий урок:

Результатом этого кода будет следующий HTML:

Особенности метода render

Давайте теперь поиграемся с JSX. Модифицируем результат работы метода render. Можно разбить наш див на несколько строк:

Однако, просто снести

Для решения этой проблемы можно поставить круглые скобки:

Несколько тегов в return

Результатом рендеренга не может быть несколько тегов:

Несколько тегов обязательно нужно обернуть в какой-то общий тег. Давайте обернем наши абзацы в общий тег div:

Переменные

Как уже упоминалось ранее, кусочки HTML кода можно записывать в переменные. Давайте сделаем это внутри метода render: запишем кусочек текста в переменную text, а затем напишем эту переменную после return:

Результатом работы этого кода будет следующее:

Вставка значений переменных

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

Результатом работы этого кода будет следующее:

В переменной вместо текста может хранится кусочек HTML кода — это не имеет значения, все будет работать:

Результатом работы этого кода будет следующее:

Учтите, что несколько тегов, хранящихся в переменной, обязательно нужно обернуть в какой-то общий тег. То есть вот так не будет работать:

А вот так будет, так как абзацы обернуты в один тег div:

Выполнение JavaScript

Итак, внутри кусочков HTML кода можно делать вставки переменных. Пусть у нас есть переменная num. Давайте вставим в определенное место содержимое этой переменной:

Результатом работы этого кода будет следующее:

Внутри фигурных скобок можно не только вставлять переменные, но и выполнять произвольный JavaScript код. Давайте, к примеру, в момент вставки прибавим к переменной num единицу:

Результатом работы этого кода будет следующее:

Пусть у нас теперь есть две переменные: num1 и num2. Давайте выведем на экран сумму этих переменных:

Результатом работы этого кода будет следующее:

Работа с атрибутами тегов

Вставку переменных можно делать не только в тексты тегов, но и в атрибуты. При этом кавычки от атрибутов не ставятся:

Результатом работы этого кода будет следующее:

Такое работает для всех атрибутов, но есть исключение. Вместо атрибута class следует писать атрибут className:

Результатом работы этого кода будет следующее:

Учтите, что даже если вы пишите напрямую имя класса в атрибуте class, все равно следует писать className:

Работа с CSS

С помощью атрибутов можно также добавлять CSS стили элементам.

Для этого в атрибут style передается объект с названиями CSS свойств и их значениями.

Сделаем, для примера, наш див красного цвета и размером шрифта в 30px:

Можно объект написать прямо в атрибуте — в этом случае нам нужны две фигурные скобки: первая от JSX вставки, а вторая — от объекта:

В этом объекте можно также использовать переменные. Пусть например в переменной value хранится цвет. Давайте свойство color установим в значение из этой переменной:

Условия

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

Обратите внимание на то, что константу text нужно определить над ифом, иначе она не будет видна снаружи этого ифа.

Получится, что если переменная showText имеет значение true, то будет виден один текст, а если false — то другой.

Циклы

Кусочки HTML кода можно делать в цикле. Обычно для этого используется цикл map. Пример: пусть у нас есть массив arr, давайте каждый элемент этого массива обернем в тег li и сохраним этот набор li-шек в переменную list:

В list запишется текст

  • 1
  • 2
  • 3
  • 4
  • 5 — и это будет работать ни смотря на то, что эти лишки не обернуты в общий тег. То есть в цикле такое можно делать, а напрямую так сразу написать в переменную — нет.

    Давайте добавим метод render:

    Результатом работы этого кода будет следующее:

    Проблема с ключами

    В предыдущем примере мы формировали наши лишки в цикле, вот так:

    Это будет работать, однако, если заглянуть в консоль — мы увидим ошибку: Warning: Each child in an array or iterator should have a unique «key» prop. В данном случае React требует, чтобы каждой лишке мы дали уникальный номер, чтобы реакту было проще с этими лишками работать в дальнейшем.

    Этот номер добавляется с помощью атрибута key. Чаще всего (но не обязательно) в качестве номера используется номер элемента в массиве. В нашем случае этот номер хранится в переменной index и значит исправленная строка будет выглядеть вот так: .

    Давайте запустим — ошибка из консоли исчезнет:

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

    Ключ key должен быть уникальным только внутри этого цикла, в другом цикле значения key могут совпадать со значениями из другого цикла.

    Методы класса

    Сейчас у нас вся работа происходит в классе App. Это обычный класс JavaScript, соответственно в нем мы можем делать какие-то свои методы. Давайте, к примеру, сделаем метод getText(), который будет возвращать какой-то текст:

    Учтите, что метод render обязателен в классе, иначе React выкинет ошибку. В простых примерах я этот метод буду опускать, как это сделано здесь, чтобы он не отвлекал ваше внимание.

    Вызовем наш метод getText в методе render и запишем результат работы нашего метода в переменную text. Напоминаю, чтобы вызвать метод, к нему следует обратиться через this, вот так: this.getText(). Смотрите пример:

    Можно не использовать промежуточную переменную text, а сделать return напрямую к результату работы нашего метода this.getText():

    Наш метод, конечно же, может возвращать не просто текст, а кусочек HTML кода:

    Что вам делать дальше:

    Приступайте к решению задач по следующей ссылке: задачи к уроку.

    Когда все решите — переходите к изучению новой темы.

    Погружение в React: роутер

    Эта статья является первой в серии из трех статей о React от Брэда Вестфолла. Существует много руководств о том, как начать работать с React, но вопрос, что делать с этим дальше, освещен намного меньше. Если вы новичок в React, начните, например, с этого видео. Серия ориентирована на тех, кто уже знаком с основами.

    Когда я только начинал изучать React, я нашел много курсов для начинающих ( 1, 2, 3, 4), показывающих, как создавать отдельные компоненты и выводить их в DOM. Они хороши для того, чтобы освоить основы вроде JSX и свойств, но мне хотелось выяснить, как React работает на более серьезном уровне, например, в рабочем одностраничном приложении (SPA). Так как моя серия статей охватывает много материала, я не буду объяснять базовые вещи для начинающих. Вместо этого я буду исходить из того, что у вас есть понимание как создать и вывести, как минимум, один компонент.

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

    Образцы кода

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

    Чтобы все оставалось простым и кратким, в примерах кода будет подразумеваться, что React и React Router подключены с CDN. Поэтому в примерах вы не увидите их подключения с помощью require() или import . Ближе к концу курса мы добавим Webpack и Babel. И с этого момента ES6 неотвратим!

    Роутер React

    React это не фреймворк, а библиотека и, следовательно, он не предназначен для решения всех потребностей приложения. Он отлично работает в создании компонентов и предоставляет систему для управления состоянием, но создание сложного SPA потребует дополнительных модулей. Первое, что мы рассмотрим это React Router.

    Если вы ранее уже использовали какой-либо роутер на фронтенде, многие концепции покажутся вам знакомыми. Но в отличие от любого другого роутера, с которыми я работал, роутер React использует JSX, который на первый взгляд может показаться немного странным.

    В качестве примера приведу код для рендеринга отдельного компонента:

    А вот рендеринг того же компонента Home с роутером React.

    Отметьте, что и это две разные вещи. Технически это компоненты React, но сами они не создают DOM. Может показаться, что выводится в ‘root’ , но на самом деле мы просто определяем правила работы нашего приложения. Продвигаясь дальше, вы часто будете сталкиваться с этой концепцией: временами компоненты существуют не для создания DOM, а для координации действий других компонентов.

    В нашем примере, определяет правило, что при посещении домашней страницы / в ‘root’ будет выводиться компонент Home .

    Множественные маршруты

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

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

    Каждый при совпадении URL будет выводить соответствующий компонент. Одномоментно в ‘root’ будет выводиться лишь один из трех компонентов. С такой стратегией мы монтируем роутер в DOM ‘root’ только один раз, а затем уже сам роутер переключает компоненты в соответствии с изменениями маршрута.

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

    Многократно используемая раскладка

    Пока мы видим скромное начало создания одностраничного приложения. Однако оно по-прежнему не решает никаких реальных проблем. Конечно, мы могли бы сделать эти три компонента полноценными страницами HTML, но как насчет многократного использования кода? Есть шансы, что у этих компонентов есть общие элементы типа хедера и боковой колонки. Так можем ли мы обойтись без повторения одной и той же разметки внутри каждого компонента?

    Представьте, что мы делаем приложение на основе следующего макета:

    Простой макет приложения

    Если вы подумаете о том, что из этого макета можно вынести в многократно используемые фрагменты, вы придете к следующей идее:

    Макет, разделенный на части

    Подход на основе вкладываемых компонентов и раскладок позволяет нам создать многократно используемые фрагменты.

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

    Поиск виджетов использует ту же основу, что и поиск пользователей

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

    Это обычная стратегия и если вы использовали какую-либо систему шаблонов, то вы скорее всего уже делали что-то похожее. Начнем с разметки, напишем статический HTML без учета JavaScript:

    Запомните, элемент ‘root’ всегда будет присутствовать, так как это единственный элемент, который выполняет роль исходного HTML Body до запуска JavaScript. Слово “root” в данном случае уместно, так как все приложение React будет выводиться в него. Но никаких “правильных имен” и соглашений по именованию нет, я лично выбрал “root” и буду использовать это название в остальных примерах. Не монтируйте ничего непосредственно в body , это крайне не приветствуется.

    После создания статического HTML конвертируем его в компоненты React:

    Не обращайте особого внимания на то, что в названии я использовал не только термин “Component”, но и “Layout”. Разумеется, это все компоненты, просто два из них я назвал “Layout” исходя из той роли, которую они выполняют.

    Мы будем использовать вложенные маршруты для размещения UserList внутри SearchLayout и далее внутри MainLayout . Но сначала обратите внимание, что при помещении UserList в родительский компонент SearchLayout , последний будет использовать this.props.children для определения местоположения UserList . У всех компонентов есть свойство this.props.children , но только после вложения компонентов React автоматически заполняет это свойство у родительского компонента. Для компонентов, которые не являются родительскими, свойство this.props.children будет равно null .

    Вложенные маршруты

    Так как нам вложить эти компоненты? Это сделает роутер, когда сделаем вложенные маршруты:

    Компоненты будут вложены друг в друга соответственно тому, как вложены маршруты. Когда пользователь переходит по адресу /users , роутер разместит компонент UserList внутри SearchLayout , а SearchLayout внутри MainLayout . В итоге при переходе /users будут выведены три вложенных компонента внутри ‘root’ .

    Заметьте, что в коде нет правил для случаев, когда пользователь посещает домашнюю страницу ( / ) или поиск по виджетам. Они были пропущены для простоты, но мы вставим их в новый роутер:

    Вы, возможно, заметили, что JSX следует правилам XML в том плане, что компонент Route может быть записан как один самозакрывающийся тег: или как два тега . . Это касается всего JSX, включая пользовательские компоненты и нормальные узлы DOM. Например, запись

    Для краткости просто представьте WidgetList похожим на UserList .

    Так как у есть два дочерних маршрута, пользователь может посетить /users или /widgets и соответствующий загрузит нужный компонент внутрь компонента SearchLayout .

    Также обратите внимание, как компонент Home размещается непосредственно внутри MainLayout без задействования SearchLayout . Вы можете представить, насколько легко можно изменять вложенность раскладок и компонентов, переставляя маршруты.

    Маршрут с IndexRoute

    Роутер React очень выразителен и часто дает возможность сделать одно и то же разными способами. Например, мы можем написать наш роутер так:

    Несмотря на внешнее отличие, он делает то же, что и предыдущий.

    Дополнительные атрибуты маршрутов

    Временами у бывает только атрибут component , а атрибут path отсутствует (как у маршрута SearchLayout примером выше). Бывает и наоборот. Чтобы выяснить почему так, рассмотрим пример:

    Фрагмент маршрута /product повторяется. Мы можем убрать повторение, обернув все три маршрута новым :

    Мы опять убедились в выразительности роутера React. Вопрос:а вы заметили проблему в обоих вариантах? Ведь на данный момент у нас нет никаких правил для случаев, когда пользователь переходит по маршруту /product .

    Для решения этого мы можем добавить IndexRoute :

    Используйте
    вместо

    Добавим ссылку в наш MainLayout :

    Атрибуты в
    будут передаваться через создаваемые ими ссылки. Вот JSX:

    Он даст следующую разметку:

    Если вам надо создать ссылку, не относящуюся к роутеру, например, за пределы сайта, тогда используйте обычные ссылки как всегда. Больше информации можно найти в документации о IndexRoute и Link.

    Активные ссылки

    Компоненты
    могут отслеживать свое нахождение в активном состоянии:

    Если пользователь перешел на URL /users , роутер будет искать совпадающие ссылки в
    и добавлять им класс active , вот здесь это описано подробно.

    История браузера

    Чтобы избежать путаницы, я еще не упоминал об одной важной детали. должен знать какая стратегия отслеживания истории используется. Документация роутера React рекомендует browserHistory, это делается так:

    В предыдущих версиях роутера React, атрибут history был не обязательным и по умолчанию использовал hashHistory. Как видно из названия, в URL использовался хэш ( # ) для управления маршрутизацией в SPA, так как вы могли бы ожидать после опыта использования роутера Backbone.js.

    С hashHistory URL будут выглядеть так:

    При имплементации browserHistory адреса выглядят более органичными:

    • example.com
    • example.com/users
    • example.com/widgets

    Но при использовании на фронтенде browserHistory есть один нюанс на серверной стороне. Если пользователь начинает посещение с example.com и затем переходит на /users и /widgets , роутер React работает как и ожидается. Однако, если пользователь начинает посещение сразу с example.com/widgets или же обновляет example.com/widgets , то браузер делает запрос к серверу по адресу /widgets . И при отсутствии роутера на стороне сервера мы получим ошибку 404:

    Осторожнее с URL, на сервере тоже нужен роутер

    Для решения проблемы с ошибкой 404 из-за сервера, в документации роутера React рекомендуется использовать подстановочный роутер (wildcard router). С этой стратегией не имеет значения, какой адрес запрашивается на сервере — сервер всегда возвращает тот же файл HTML. Затем, даже если пользователь сразу начинает с example.com/widgets и сервер возвращает тот же HTML, роутер React сам загрузит нужный компонент.

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

    Можно ли изоморфно использовать роутер React на серверной и клиентской стороне? Можно, но эта тема находится за пределами нашей серии.

    Редирект с browserHistory

    Объект browserHistory это синглтон, поэтому вы можете включать его в любой из своих файлов. Если вам нужно вручную перенести пользователя на другой URL, вы можете использовать метод push :

    Сопоставление маршрутов

    Роутер React обрабатывает сопоставление маршрутов так же, как и другие роутеры:

    Этот маршрут срабатывает, когда пользователь посещает один из адресов начинающихся с users/ , независимо от последующих символов. Это будет / users/1 , /users/143 и даже /users/abc — но их валидация лежит на ваших плечах.

    Роутер React передаст значение :userId в качестве свойства UserProfile , внутри UserProfile оно будет доступно как this.props.params.userId .

    Демо роутера

    Итак, у нас уже достаточно кода для первой демонстрации:

    Если вы кликните на один из маршрутов в примере, вы заметите, что кнопки браузера “вперед” и “назад” работают с роутером. Это одна из основных причин выбора этой стратегии работы с историей. Также учитывайте, что при посещении всех адресов не делаются запросы к серверу, за исключением самого первого для получения начального HTML. Круто же?

    В нашем примере на CodePen, React , ReactDOM и ReactRouter являются глобальными переменными с CDN. Внутри объекта ReactRouter есть все, что нам нужно типа компонентов Router и Route . Поэтому мы можем использовать ReactRouter вот так:

    В этом примере у всех компонентов есть префикс в виде их родительского объекта ReactRouter . Мы можем использовать новый реструктуризующий синтаксис:

    Таким образом мы “выделяем” части ReactRouter в обычные переменные для прямого доступа к ним.

    Начиная с этого момента, в наших примерах будет активно использоваться синтаксис ES6 включая реструктуризацию, оператор расширения, импорт/экспорт и прочее. В каждом случае будет краткое разъяснение нового синтаксиса с примерами из репозитория GitHub.

    Сборка с webpack и Babel

    Как уже было сказано, в дополнение к серии статей есть репозиторий с кодом на GitHub. Посколько мы собираемся делать реальное одностраничное приложение, мы будем использовать серьезные инструменты типа webpack и Babel.

    • webpack объединяет для браузера несколько файлов JavaScript в один.
    • Babel конвертирует код ES6 (ES2015) в ES5, так как большинство браузеров не понимают ES6. Со временем браузеры поймут ES6 и Babel будет не нужен.

    Если вы чувствуете себя неуверенно с этими инструментами, не переживайте. В образцах кода они полностью настроены и вы можете сфокусироваться на React. В README.md репозитория есть дополнительная документация по рабочему процессу.

    Будьте осторожны с устаревшим синтаксисом

    Поиск информации в Google по роутеру React может привести вас на одну из многих страниц StackOverflow, написанных в то время, когда версия роутера была до релиза 1.0. Многие возможности из пре-релиза 1.0 признаны устаревшими, вот их краткий список:

    • устарел. Используйте вместо него .
    • устарел. Используйте вместо него .
    • устарел. Теперь Alternative
    • устарел.
    • willTransitionTo устарел. Теперь onEnter
    • willTransitionFrom устарел. Теперь onLeave
    • «Locations» называются «histories» .

    Полный список версий 1.0.0 и 2.0.0.

    Заключение

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

    В статье использовано оформление от Линн Фишер @lynnandtonic.

    Что может крутого сделать React.js чего не может jQuery [закрыт]

    Всегда писал на jQuery. Но вот недавно сделал хелло ворлд на AngularJS, Angular2, React.js, Vue.js. И честно говоря не нашел в них ничего супер крутого. Скажите, пожалуйста, лучше с реальным примером — где jQuery проигрывает ReactJS. Желательно в связке с asp.net mvc/api

    Закрыт по причине того, что вопрос слишком общий участниками MedvedevDev, Air, Suvitruf says Reinstate Monica ♦ , user33274, andreymal 24 дек ’17 в 10:05 .

    Пожалуйста, исправьте вопрос так, чтобы он описывал конкретную проблему с достаточной детализацией для определения адекватного ответа. Не задавайте сразу несколько вопросов. См. «Как задать хороший вопрос?» для прояснения ситуации. Если вопрос можно переформулировать согласно правилам, изложенным в справке, отредактируйте его.

    1 ответ 1

    В реакте другой подход к рендерингу интерфейса. Как любят говорить, интерфейс становится функцией от состояния. Вот это и есть круто. Накручивать реакт на мвц-модель на фронтенде я бы не стал (хотя долго пытался сделать это в связке с mobx). Одним днём, разбираясь с react-apollo (graphql клиент) мне открылось оно — react composition. В этот день, после более года работы с реактом, я, как мне кажется, действительно понял, что такое реакт.

    Реакт позволяет абстрагироваться от DOM и в этом большой плюс. Тестировать значительно проще.

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

    Реакт становится многократно лучше со следующими технологиями (без них, я бы сказал, бессмысленно его трогать):

    0) (от xFloooo) react-loadable упрощает асинхронную подгрузку кода (code-splitting)

    1) es6/typescript/flow . Лично я бы порекомендовал Typescript, т.к. библиотека типов значительно больше. Некоторые из них, к сожалению, не всегда оправдываю ожидания полностью, но в целом всё работает довольно хорошо. Наверное, не в strict режиме, дабы не играть в игру «убедим тайпскрипт, что наш код правильно написан).

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

    2) storybook — чтобы работать над презентационными компонентами в вакууме (а не пытаться их сразу встроить в сайт). Это виртуальное полотно, где мы можем разместить компонент, над которым работаем и смотреть как он себя ведёт и программировать его. И подключать в проект, когда компонент написан, а не в процессе написания.

    3) redux/mobx . рекомендую редакс, в основном из-за большой экосистемы и прозрачности работы. typescript-fsa — полностью типизированные экшны!

    4) react-router и react-redux-router — практически безальтернативное решение маршрутизации в приложении

    4) recompose и паттерны hoc/react-composition/render props

    5) styled-components + polished или, возможно, css-in-js типа aphrodite

    6) jest для тестирования (вы же пишете тесты?)

    7) Для redux-а существует большое количество библиотек, из них я бы хотел выделить

    redux-form для форм

    redux-fractal / redux-ui для локального стейта контейнеров (можно с лёгкостью использовать копии одного и того же стора (стейт/экшены/редьюсеры) для нескольких контейнеров.

    react-semantic-ui для прототипирования интерфейсов (а может и для продакшна, если настроить dead code elimination). Конечно же, это не единственная библиотека подобного характера, есть ещё antd , react-material-ui и дюжина других. Тот же бутстрап

    react-sortable-hoc для быстрого dnd в рамках одного списка

    classnames — швейцарский нож для соединения многих имён css классов в одну строку, когда присутствует сложная логика

    Angular JS или React JS: выберите лучший для себя фреймворк

    Одним из самых популярных фреймворков для разработки веб-приложений является JavaScript. Он предлагает множество вариантов на выбор, чтобы помочь разработчикам создавать одни из лучших приложений на основе их бизнес-требований. Некоторые из наиболее часто используемых фреймворков JavaScript — это Angular JS, React JS, Vue JS и так далее. Все фреймворки исключительно хороши и предлагают широкий спектр функций, что, в свою очередь, затрудняет для разработчиков выбор одного конкретного.

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

    Согласитесь, это здорово, если вы можете сравнить наиболее значимые функции и характеристики фреймворков, а затем решить, что вам подходит. Таким образом, исходя из размера и бюджета, вы сможете выбрать фреймворк, соответствующий вашему проекту. В этой статье мы обсудим Angular JS vs React JS с их плюсами и минусами.

    Angular JS – это шаблон проектирования архитектуры приложения JavaScript (MVVM), запущенный в 2009 году. Главной целью было создание веб-приложений, которые обеспечивают супер уровень интерактивности.

    Давайте посмотрим на основные преимущества Angular JS.

    Преимущества или плюсы Angular JS

    • Он поставляется с рядом новых функций, в том числе расширенные RXJS, последний HTTP-клиент и улучшенная компиляция (которая происходит менее чем за три секунды).
    • Минимизация рисков — да, вы правильно прочитали! Функция двусторонней привязки данных обеспечивает исключительное поведение приложения, сводя к минимуму риски, что означает меньшее количество ошибок. Таким образом, всякий раз, когда происходит незначительное изменение данных, действие распространяется, что означает автоматическую синхронизацию новых обновлений через модель данных и представление модели.
    • Существует возможность введения зависимости функций, связанных с компонентами с модулями и модульностью, в общих чертах. Это встроенная функция зависимости системы, которая является лучшим из преимуществ, поставляющихся с Angular JS.
    • Модель MVVM позволяет разработчикам работать отдельно в одних и тех же разделах приложения, реализуя один и тот же набор функций данных. Где еще вы можете это найти?
    • Любой желающий может присоединиться к процессу разработки приложения в любое время, поскольку новым участникам предоставляется достаточно времени, чтобы все узнать и понять, благодаря доступу к подробной документации, предлагающей важную информацию для отдельных разработчиков – независимо от того, покидает ли разработчик команду или новый человек присоединяется.
    • Фреймворк может работать в любом браузере или платформе, что означает, что он поддерживает кросс-совместимость, независимо от устройства, ОС, браузера или платформы. Поскольку он поставляется с встроенными инструментами и функциональными возможностями, существует согласованность, а компоненты гибкие, прочные и надежные по сравнению с другими платформами.
    • Он построен на основе компонентной архитектуры, которая встраивает глубокую привязку в компоненты. Каждый из этих компонентов содержит элементы с соответствующими функциональными возможностями. Кроме того, вы обнаружите, что элементы в этих компонентах хорошо инкапсулированы и слабо связаны. Эта характеристика помогает сделать компоненты многоразовыми, а также помогает повысить их тестируемость и поддерживать обслуживание.
    • Глобальная поддержка сообщества, доступная для Angular JS, является одним из факторов, которые делают его идеальной платформой JavaScript. Вы увидите, что разработчики и дизайнеры постоянно сотрудничают и вносят свой вклад в сообщество, повышая надежность и доверие к этому фреймворку.
    • С помощью TypeScript вы можете наслаждаться такими функциями, как статическая проверка шрифтов, высокопроизводительная типизация и объектно-ориентированные шаблоны, что снова делает его одним из лучших фреймворков JavaScript.
    • Одной из лучших частей использования Angular JS является простота разработки и настройки объектной модели документа (DOM).
    • Вы можете легко создавать мощные шаблонные решения, используя библиотеки Аngular, которые предназначены для этой конкретной функции.
    • Когда вы пытаетесь провести модульный тест в Angular JS, вам необходимо ввести фиктивные данные в контроллер, и к этому результату можно получить доступ с его поведением в представлении. Разрабатывайте каждую из этих страниц по отдельности, которые в дальнейшем могут быть объединены с компонентами для просмотра результата.
    • Привлекательный пользовательский интерфейс с привязкой данных сочетается с одной маршрутизацией, что является еще одним важным преимуществом.
    • Требуется, чтобы разработчики обязательно синхронизировали данные между моделью, представлением и компонентом.
    • Фреймворк предоставляет возможность создавать повторно используемые компоненты с помощью директив, так как имеет расширение для синтаксиса HTML.

    Недостатки или минусы Angular JS

    Теперь давайте рассмотрим основные недостатки использования Angular JS.

    • Первая версия Angular имеет сложный синтаксис, что делает ее неудобной для работы. (Но если вы решите использовать TypeScript 2.4, вы избавитесь от всех этих сложностей, что упростит обучение и работу.)
    • Есть проблемы миграции, с которыми люди утверждают, что столкнулись при переходе от одной из старых версий к последним.
    • Как мы уже говорили, разработчики могут легко разработать индивидуальный DOM, но нет никакой гарантии, насколько хорошо эти элементы DOM будут работать.
    • Сторонняя интеграция — непростая задача для разработчиков при работе с Angular JS.
    • Параметры маршрутизации могут быть меньше, и даже доступные ресурсы не имеют ничего хорошего, когда дело доходит до маршрутизации.
    • Может быть непросто отлаживать фреймворк в любое время.
    • Поскольку он содержит интерактивные элементы встроенных страниц, страницы могут быть медленными, что снова является недостатком.
    • Для изучения и понимания Angular JS, особенно для новичков, может потребоваться довольно много времени.

    Некоторые из компаний, которые успешно используют Angular JS — Udemy, PayPal, Google, AWS, Crunchbase, YouTube, Freelancer, Nike и другие.

    Преимущества или плюсы React JS

    Ниже приведены основные плюсы React JS. Посмотрим на основные моменты.

    • Одна из лучших частей использования React JS заключается в том, что фреймворк легко изучить и понять. Синтаксис React JS легче понять по сравнению с другими фреймворками JavaScript. Если у вас есть четкое представление и понимание навыков написания HTML, то вам не нужно беспокоиться — просто примите решение. Вам не нужно беспокоиться о серьезных сложностях, как в TypeScript JS в Angular.
    • Вы можете использовать виртуальный DOM, который, как известно, умеет организовывать документы в форматах XML, HTML или XHTML по мере необходимости в виде дерева. Это наиболее предпочтительный формат веб-браузерами при анализе различных компонентов любого веб-приложения.
    • Нет никакого нарушения родительских данных, вызванного дочерними данными, из-за нисходящей привязки данных, что, как правило, оказывает влияние на фреймворки.
    • Он использует 100% -ную библиотеку JavaScript с открытым исходным кодом, которая обновляется ежедневно.
    • Высокий уровень гибкости.
    • Вы можете наслаждаться максимальной отзывчивостью.
    • В сочетании с ES6 / 7 он может принимать любое количество нагрузки.
    • Вы можете легко перейти с одной версии на другую без каких-либо осложнений.
    • Поскольку его архитектура полностью основана на компонентах, каждый из этих компонентов можно легко импортировать.
    • Можно повторно использовать коды, некогда уже написанные в React JS.
    • Процесс отладки намного проще и легче по сравнению с другими платформами.
    • Пользовательский интерфейс довольно прост.
    • Обновления не занимают слишком много времени и упрощаются благодаря поддержке со стороны интерфейса и сервера.
    • С помощью React JS можно разрабатывать изоморфные или универсальные веб-приложения, обеспечивающие рендеринг на стороне сервера.
    • Фреймворк совместим с платформами iOS и Andro >Теперь рассмотрим основные недостатки React JS.

    • JSX или, как мы называем, синтаксис расширения JavaScript, похоже, не является отличной идеей для разработки веб-приложений, потому что он включает в себя много сложностей. К тому же, кривая обучения также непростая.
    • Трудно думать о React JS с точки зрения фреймворка, потому что это скорее библиотека, чем фреймворк.
    • Каждый раз, много обновлений вносятся в его документы, а новые инструменты продолжают выпускаться, что делает его более сложным для разработчиков при работе с кодами.
    • Всегда есть разница в архитектуре при новых обновлениях, что затрудняет работу с управлением.
    • Вы не можете легко включить React JS в MVC, так как вам всегда нужно будет его настраивать.

    Вы можете сравнить все функции и недостатки, которые мы перечислили в этой статье, чтобы вам было легче понять, какой из двух фреймворков, Angular JS vs React JS, лучше подходит для вашего бизнеса или потребностей проекта. Подумайте, что нужно вашему проекту. Какие функции ему подходят. И после этого на основании ваших требований, сделайте правильный выбор, наблюдая в итоге, как разворачивается магия и как она помогает вам завоевывать клиентов.

    Всем успешной работы и творчества!

    Сравнение JavaScript фреймворков Vue.js, React и Angular (2020)

    Начиная новый проект, программист сталкивается с выбором: какой JavaScript фреймворк выбрать для сайта – Vue.js, React или Angular? Различия между ними есть, и довольно существенные. Однако каждый из них подходит для решения задач. Поэтому остается открытым вопрос эффективности работы.

    Открытых данных по широте использования фреймворков нет, однако косвенный анализ открытых вакансий на сайте Indeed.com дает довольно любопытное распределение:

    1 место – React 78,1%

    2 место – Angular 21%

    3 место – Vue.js 0,8%

    4 место – без уточнения среды 0,1%

    Данные опроса StackOverflow дают уже несколько другие цифры: 67% голосов отданы React, тогда как за Angular «проголосовало» 42% программистов.

    Получается, что популярней всех – React. Но значит ли, что он будет эффективней? Вовсе нет, ведь за популярностью кроется лишь использование среды в таких проектах, как Facebook, Instagram. К тому же, например, на Github именно у Vue.js больше всего «звездочек».

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

    1. Рендеринг – отображение конечного результата

    Javascript фреймворки в первую очередь стоит сравнить по рендерингу страницы. Современная архитектура допускает два вида: на стороне клиента (страница отрисовывается за счет мощностей ПК пользователя) или на стороне сервера.

    DOM – Document Object Model – объектная модель документа, позволяющая считывать и менять содержимое, оформление и даже структуру html-документов. Каждый из фреймворков подходит по-своему к обработке DOM что и оказывает влияние на рендеринг конечной страницы, отображаемой на экране пользователя.

    Vue.js и React создают копию DOM, обрабатывают ее, а затем результат сравнивается с исходной версией. В конечном документе (то есть на экране пользователя) заменяются только те части страницы, которые отличаются от результатов обработки.

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

    В корне отличается подход к обработке DOM фреймворком Angular версии 1.x и выше. Здесь происходит разделение на два потока, причем за рендеринг DOM «отвечает» браузер (клиентская часть), а за создание директив, загрузку кода и сервисов – общий поток (серверная часть).

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

    2. Архитектура компонентов

    React не относится к фреймворкам в чистом виде. Это своего рода модифицированная библиотека, «заточенная» под MVC (Model-View-Controller, где Модель отвечает за предоставление данных, Вид – отображает данные Модели пользователю, а Контроллер интерпретирует действия пользователя и заставляет Модель вносить изменения).

    Angular и Vue.js относятся уже к самим фреймворкам.

    Если в основе архитектуры проекта лежит React, то это предопределяет:

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

    Следовательно, для реализации архитектуры понадобится больше времени. Низкоуровневый API (Application Programming Interface – набор готовых команд, подробнее о том, что такое API) требует слишком долгой настройки.

    В случае использования готовых фреймворков – Vue.js и Angular, проблем с подбором или настройкой библиотек для разных задач уже не возникает. Высокоуровневый API обеспечивает обратную совместимость для всех библиотек.

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

    3. Направленность и классы зависимостей

    React и Vue.js поддерживают только одностороннюю передачу данных. При этом в React объекты инкапсулированы. Говоря простым языком, каждый из объектов приложения относится к конечным процедурам, которые не требуют действий пользователя до окончания работы.

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

    Фреймворк Vue.js работает уже чуть иначе. JS по-прежнему односторонний, но компоненты работают с шаблонами, и на выходе получается чистый html. Есть поддержка JSX, что упрощает переход с React и схожих библиотек.

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

    Фреймворк Angular несколько отличается логикой процесса. Да, здесь есть все, что свойственно Vue.js, однако описание взаимодействия объектов происходит в службах, являющихся составными частями модулей.

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

    Поддержка MVVM (Model-View-ViewModel) допускает решение разных задач в одном разделе приложения с использованием одного набора данных. Зависимость функций определяет двустороннюю направленность передачи данных. Каждая процедура может запустить другой процесс.

    4. Обратная совместимость

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

    Angular

    Полноценный фреймворк. Абсолютная зависимость от предыдущих версий и компонентов. Прямой переход с 4.0 на 5.0 невозможен, придется последовательно устанавливать все обновления между версиями. Это приведет к необоснованному увеличению объема приложения. Кстати, занятный факт, Angular версии 3.0 не существует. После 2-й версии сразу идёт 4-я.

    React

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

    Vue.js

    Прогрессивный фреймворк (согласно заявлению главного разработчика Vue.js Эвана Ю). Модульная система аналогична React, но включающая в себя все атрибуты JS-фреймворка, работающих с полной обратной совместимостью.

    5. «Техподдержка» – документация и комьюнити

    При выборе какой-то определенной архитектуры нельзя игнорировать поддержку сообщества программистов (комьюнити). Ведь даже простые функции могут вызывать затруднения.

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

    React

    Довольно непросто организована «техподдержка» среды React. С одной стороны, комьюнити составляют тысячи программистов в разных странах, что полностью снимает языковой барьер. Посоветоваться с «коллегами по цеху» можно на любом языке, на русском, английском, китайском и других.

    Однако открытый исходный код и ежедневное появление новых библиотек на базе React являются недостатками среды. Сложно найти документацию, которая бы исчерпывающе описывала процессы применения, функции и свойства конкретной свежей выпущенной библиотеки.

    Чаще всего новые модули появляются таким образом: программист создает библиотеку для решения какой-то задачи в своем проекте. Затем он пишет краткое руководство и выкладывает наработки в интернет.

    Vue.js

    Подробная документация для фреймворка – «визитная карточка» Vue.js. Однако сторонники среды не упоминают, что большая часть «Мануалов» не имеет нормального перевода ни на английский, ни на русский язык.

    Сообщество пользователей, несмотря на большую популярность Vue.js на «Хабре» или Github, довольное скромное, особенно по сравнению с Angular или React. Даже JQuery пользуется гораздо больше разработчиков, чем Vue.js.

    Как правило, ответ на вопрос о реализации задачи ожидается несколько суток. И не факт, что кто-то сможет ответить.

    Несколько облегчит использование среды чат на официальном сайте проекта.

    Angular

    В отличие от Vue.js и React, для фреймворка написана не только подробная документация, но и выпущено немало гайдлайнов. Следовательно, не придется прибегать к помощи комьюнити для поиска ответов.

    Количество программистов, использующих фреймворк, исчисляется сотнями тысяч. Разработчик в любой момент может задать вопрос из разряда «Howto». Для этого не придется искать официальный сайт проекта. Обратиться за помощью можно и на stackoverflow, и на toster, и на других площадках, вплоть до «Ответы@mail.ru».

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

    Как решить задачу и где найти ответ — совершенно точно подскажут наши менторы по программированию на JavaScript Выбрать ментора

    Подытожим

    Конечно, сравнить фреймворки абсолютно объективно достаточно трудно. Но анализ позволит начинающему разработчику подобрать платформу. Подведем итоги:

    1. Если нужно быстро изучить среду, то стоит выбирать между Vue.js и React.
    2. На Vue.js легко перейти как пользователю Angular, так и React. Ведь здесь получается чистый html-код, знакомый всем разработчикам. Приемы и техники используются примерно те же, что и в Angular.
    3. Если предполагается разработка крупного проекта, то стоит рассматривать Angular в качестве основы. Он обеспечивает максимальную гибкость и скорость рендеринга. Огромный опыт других разработчиков позволит решить вопросы, которые обязательно возникнут при работе над приложением. React окажется слишком объемным, а для Vue.js еще не существует большого количества гайд-лайнов.
    4. Если к разработке в будущем будут привлекаться другие программисты, то Vue.js станет лучшим выбором. Ведь этот фреймворк не только прост для изучения, но и позволяет менять приложение без разрушения его архитектуры.
    5. Если для проекта предусматривается многоступенчатое обновление и расширение функциональности в будущем, то стоит использовать Vue.js или React из-за превосходной обратной совместимости.

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

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

    Читай также:

    • Зачем нужен Angular.js и почему именно он;
    • Rails 5 и Vue.js: как перестать мучаться с фронтендом и начать жить;
    • Как и зачем mkdev перешёл на Vue.js;
    • Топ-5 PHP-фреймворков — не JS единым.

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

    Hello world

    Не работает роутинг в продакшен режиме create-react-app, в деве все нормально работает,
    подскажите пожалуйста что подправить.

    Javascript
    Javascript
    08.07.2020, 13:51

    Зависимости create-react-app
    При создании react приложения командой create-react-app app внутри /app создается каталог.

    Create-react-app development mode с php
    Каким образом можно при разработке ссылаться на бакэнд файлы php? вписать ссылку.

    App.config create global connectionstring from wind
    Всем привет. Есть два текстбокса, логин — пароль. Возможно ли после ввода данных — создать.

    Не работает роутинг
    Привет, помогите, не могу разобраться с роутингом с файлом routing.php. С YAML разобрался, а с php.

    Не работает роутинг
    Здравствуйте! Пишу Windows servise WebApi selfhost. Не работает get запрос (в параметре которого.

    URL-адреса React-маршрутизатора не работают при обновлении или записи вручную

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

    Например, я нахожусь в localhost/joblist и все в порядке, потому что я приехал сюда, нажимая на ссылку. Но если я обновлю веб-страницу, я получу:

    По умолчанию это не сработало. Первоначально у меня был URL как localhost/#/ и localhost/#/joblist и они работали отлично. Но мне не нравится этот вид URL, поэтому, пытаясь стереть этот # , я написал:

    Эта проблема не возникает с localhost/ , эта всегда возвращает то, что я хочу.

    РЕДАКТИРОВАТЬ: Это приложение одностраничное, поэтому /joblist не нужно ничего спрашивать на каком-либо сервере.

    EDIT2: весь мой маршрутизатор.

    Глядя на комментарии к принятому ответу и общий характер этого вопроса («не работает»), я подумал, что это может быть хорошим местом для некоторых общих объяснений по вопросам, связанным с этим.Таким образом, этот ответ предназначен в качестве справочной информации/разработки по конкретному варианту использования ОП.Пожалуйста, потерпите меня.

    Сторона server- против стороны клиента

    Первая важная вещь, которую нужно понять, это то, что теперь есть 2 места, где URL интерпретируется, тогда как раньше было «1» в «старые времена». В прошлом, когда жизнь была проста, какой-то пользователь отправлял запрос на http://example.com/about на сервер, который проверял часть пути URL-адреса, определял, что пользователь запрашивает страницу about, а затем отправлял обратно стр.

    С маршрутизацией на стороне клиента, которую предоставляет React-Router, все не так просто. Во-первых, у клиента еще нет загруженного кода JS. Так что самый первый запрос всегда будет на сервер. Затем будет возвращена страница, которая содержит необходимые теги сценариев для загрузки React, React Router и т.д. Только после загрузки этих сценариев начинается фаза 2. На этапе 2, когда пользователь нажимает, например, на навигационную ссылку «О нас», URL-адрес изменяется локально только на http://example.com/about (это стало возможным благодаря History API), но не запрашивает сервер сделано. Вместо этого React Router делает свое дело на стороне клиента, определяет, какое представление React отображать, и отображает его. Предполагая, что вашей странице about не нужно совершать какие-либо вызовы REST, это уже сделано. Вы перешли из дома в О нас без каких-либо запросов к серверу.

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

    Но теперь подумайте, что произойдет, если скопировать и вставить URL-адрес в адресную строку и отправить его другу по электронной почте. Ваш друг еще не загрузил ваш сайт. Другими словами, она все еще в фазе 1. На ее компьютере еще не запущен React Router. Поэтому ее браузер отправит запрос на сервер по http://example.com/about .

    И вот тут начинается твоя проблема. До сих пор вы могли бы просто разместить статический HTML в корне вашего сервера. Но это даст 404 ошибки для всех других URL-адресов при запросе с сервера. Те же URL-адреса прекрасно работают на стороне клиента, потому что там React Router выполняет маршрутизацию за вас, но они терпят неудачу на стороне сервера, если вы не заставите свой сервер их понять.

    Объединение server- и маршрутизации на стороне клиента

    Если вы хотите, чтобы URL-адрес http://example.com/about работал как на server-, так и на стороне клиента, вам необходимо настроить для него маршруты как на server-, так и на стороне клиента. Имеет смысл правильно?

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

    Обход проблемы в целом: Hash History

    Если вместо истории браузеров использовать историю хэшей, ваш URL для страницы about будет выглядеть примерно так: http://example.com/#/about Часть после символа хеш ( # ) не отправляется на сервер. Таким образом, сервер видит только http://example.com/ и отправляет страницу индекса, как и ожидалось. React-Router подберет деталь #/about и покажет правильную страницу.

    Недостатки:

    • «уродливые» URL
    • Рендеринг стороны server- невозможен при таком подходе. Что касается поисковой оптимизации (SEO), ваш сайт состоит из одной страницы, на которой почти нет контента.

    Вместилище разнообразных предметов

    При таком подходе вы используете историю браузеров, но просто настраиваете ловушку на сервере, который отправляет /* в index.html , эффективно предоставляя вам ту же ситуацию, что и в истории хэшей. Тем не менее, у вас есть чистые URL-адреса, и вы можете улучшить эту схему позже, не делая недействительными все ваши избранные пользователи.

    Недостатки:

    • Более сложная настройка
    • Все еще нет хорошего SEO

    Гибридный

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

    Недостатки:

    • Еще сложнее настроить
    • Только хороший SEO для тех маршрутов, которые вы предоставляете специальную обработку
    • Дублирование кода для рендеринга контента на сервере и клиенте

    изоморфный

    Что если мы используем Node JS в качестве нашего сервера, чтобы мы могли запускать один и тот же код JS на обоих концах? Теперь у нас есть все наши маршруты, определенные в одной конфигурации реакции-маршрутизатора, и нам не нужно дублировать наш код рендеринга. Это, так сказать, «Святой Грааль». Сервер отправляет ту же самую разметку, которую мы получили бы в случае перехода страницы на клиенте. Это решение является оптимальным с точки зрения SEO.

    Недостатки:

    • Сервер должен (быть в состоянии) запустить JS. Я экспериментировал с Java icw Nashorn, но он не работает для меня. На практике это в основном означает, что вы должны использовать сервер на базе Node JS.
    • Многие сложные экологические проблемы (использование window на стороне server- и т.д.)
    • Крутая кривая обучения

    Какой я должен использовать?

    Выберите тот, который вы можете сойти с рук. Лично я думаю, что все достаточно просто настроить, так что это мой минимум. Эта настройка позволяет вам улучшать вещи с течением времени. Если вы уже используете Node JS в качестве серверной платформы, я бы определенно занялся созданием изоморфного приложения. Да, сначала это сложно, но как только вы освоитесь, это действительно очень элегантное решение проблемы.

    В общем, для меня это было бы решающим фактором. Если мой сервер работает на Node JS, я бы стал изоморфным; В противном случае я бы выбрал решение Catch-all и просто расширил его (Гибридное решение), когда время идет, а требования SEO требуют этого.

    Если вы хотите больше узнать об изоморфном (также называемом «универсальным») рендеринге с помощью React, есть несколько хороших учебников по этому вопросу:

    Кроме того, чтобы начать, я рекомендую взглянуть на некоторые стартовые наборы. Выберите тот, который соответствует вашему выбору для технологического стека (помните, React — это просто V в MVC, вам нужно больше вещей для создания полноценного приложения). Начните с просмотра того, что опубликовано самим Facebook:

    Или выберите один из множества сообществ. Теперь есть хороший сайт, который пытается проиндексировать их все:

    Я начал с этого:

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

    Сравнение JavaScript фреймворков Vue.js, React и Angular (2020)

    Начиная новый проект, программист сталкивается с выбором: какой JavaScript фреймворк выбрать для сайта – Vue.js, React или Angular? Различия между ними есть, и довольно существенные. Однако каждый из них подходит для решения задач. Поэтому остается открытым вопрос эффективности работы.

    Открытых данных по широте использования фреймворков нет, однако косвенный анализ открытых вакансий на сайте Indeed.com дает довольно любопытное распределение:

    1 место – React 78,1%

    2 место – Angular 21%

    3 место – Vue.js 0,8%

    4 место – без уточнения среды 0,1%

    Данные опроса StackOverflow дают уже несколько другие цифры: 67% голосов отданы React, тогда как за Angular «проголосовало» 42% программистов.

    Получается, что популярней всех – React. Но значит ли, что он будет эффективней? Вовсе нет, ведь за популярностью кроется лишь использование среды в таких проектах, как Facebook, Instagram. К тому же, например, на Github именно у Vue.js больше всего «звездочек».

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

    1. Рендеринг – отображение конечного результата

    Javascript фреймворки в первую очередь стоит сравнить по рендерингу страницы. Современная архитектура допускает два вида: на стороне клиента (страница отрисовывается за счет мощностей ПК пользователя) или на стороне сервера.

    DOM – Document Object Model – объектная модель документа, позволяющая считывать и менять содержимое, оформление и даже структуру html-документов. Каждый из фреймворков подходит по-своему к обработке DOM что и оказывает влияние на рендеринг конечной страницы, отображаемой на экране пользователя.

    Vue.js и React создают копию DOM, обрабатывают ее, а затем результат сравнивается с исходной версией. В конечном документе (то есть на экране пользователя) заменяются только те части страницы, которые отличаются от результатов обработки.

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

    В корне отличается подход к обработке DOM фреймворком Angular версии 1.x и выше. Здесь происходит разделение на два потока, причем за рендеринг DOM «отвечает» браузер (клиентская часть), а за создание директив, загрузку кода и сервисов – общий поток (серверная часть).

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

    2. Архитектура компонентов

    React не относится к фреймворкам в чистом виде. Это своего рода модифицированная библиотека, «заточенная» под MVC (Model-View-Controller, где Модель отвечает за предоставление данных, Вид – отображает данные Модели пользователю, а Контроллер интерпретирует действия пользователя и заставляет Модель вносить изменения).

    Angular и Vue.js относятся уже к самим фреймворкам.

    Если в основе архитектуры проекта лежит React, то это предопределяет:

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

    Следовательно, для реализации архитектуры понадобится больше времени. Низкоуровневый API (Application Programming Interface – набор готовых команд, подробнее о том, что такое API) требует слишком долгой настройки.

    В случае использования готовых фреймворков – Vue.js и Angular, проблем с подбором или настройкой библиотек для разных задач уже не возникает. Высокоуровневый API обеспечивает обратную совместимость для всех библиотек.

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

    3. Направленность и классы зависимостей

    React и Vue.js поддерживают только одностороннюю передачу данных. При этом в React объекты инкапсулированы. Говоря простым языком, каждый из объектов приложения относится к конечным процедурам, которые не требуют действий пользователя до окончания работы.

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

    Фреймворк Vue.js работает уже чуть иначе. JS по-прежнему односторонний, но компоненты работают с шаблонами, и на выходе получается чистый html. Есть поддержка JSX, что упрощает переход с React и схожих библиотек.

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

    Фреймворк Angular несколько отличается логикой процесса. Да, здесь есть все, что свойственно Vue.js, однако описание взаимодействия объектов происходит в службах, являющихся составными частями модулей.

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

    Поддержка MVVM (Model-View-ViewModel) допускает решение разных задач в одном разделе приложения с использованием одного набора данных. Зависимость функций определяет двустороннюю направленность передачи данных. Каждая процедура может запустить другой процесс.

    4. Обратная совместимость

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

    Angular

    Полноценный фреймворк. Абсолютная зависимость от предыдущих версий и компонентов. Прямой переход с 4.0 на 5.0 невозможен, придется последовательно устанавливать все обновления между версиями. Это приведет к необоснованному увеличению объема приложения. Кстати, занятный факт, Angular версии 3.0 не существует. После 2-й версии сразу идёт 4-я.

    React

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

    Vue.js

    Прогрессивный фреймворк (согласно заявлению главного разработчика Vue.js Эвана Ю). Модульная система аналогична React, но включающая в себя все атрибуты JS-фреймворка, работающих с полной обратной совместимостью.

    5. «Техподдержка» – документация и комьюнити

    При выборе какой-то определенной архитектуры нельзя игнорировать поддержку сообщества программистов (комьюнити). Ведь даже простые функции могут вызывать затруднения.

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

    React

    Довольно непросто организована «техподдержка» среды React. С одной стороны, комьюнити составляют тысячи программистов в разных странах, что полностью снимает языковой барьер. Посоветоваться с «коллегами по цеху» можно на любом языке, на русском, английском, китайском и других.

    Однако открытый исходный код и ежедневное появление новых библиотек на базе React являются недостатками среды. Сложно найти документацию, которая бы исчерпывающе описывала процессы применения, функции и свойства конкретной свежей выпущенной библиотеки.

    Чаще всего новые модули появляются таким образом: программист создает библиотеку для решения какой-то задачи в своем проекте. Затем он пишет краткое руководство и выкладывает наработки в интернет.

    Vue.js

    Подробная документация для фреймворка – «визитная карточка» Vue.js. Однако сторонники среды не упоминают, что большая часть «Мануалов» не имеет нормального перевода ни на английский, ни на русский язык.

    Сообщество пользователей, несмотря на большую популярность Vue.js на «Хабре» или Github, довольное скромное, особенно по сравнению с Angular или React. Даже JQuery пользуется гораздо больше разработчиков, чем Vue.js.

    Как правило, ответ на вопрос о реализации задачи ожидается несколько суток. И не факт, что кто-то сможет ответить.

    Несколько облегчит использование среды чат на официальном сайте проекта.

    Angular

    В отличие от Vue.js и React, для фреймворка написана не только подробная документация, но и выпущено немало гайдлайнов. Следовательно, не придется прибегать к помощи комьюнити для поиска ответов.

    Количество программистов, использующих фреймворк, исчисляется сотнями тысяч. Разработчик в любой момент может задать вопрос из разряда «Howto». Для этого не придется искать официальный сайт проекта. Обратиться за помощью можно и на stackoverflow, и на toster, и на других площадках, вплоть до «Ответы@mail.ru».

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

    Как решить задачу и где найти ответ — совершенно точно подскажут наши менторы по программированию на JavaScript Выбрать ментора

    Подытожим

    Конечно, сравнить фреймворки абсолютно объективно достаточно трудно. Но анализ позволит начинающему разработчику подобрать платформу. Подведем итоги:

    1. Если нужно быстро изучить среду, то стоит выбирать между Vue.js и React.
    2. На Vue.js легко перейти как пользователю Angular, так и React. Ведь здесь получается чистый html-код, знакомый всем разработчикам. Приемы и техники используются примерно те же, что и в Angular.
    3. Если предполагается разработка крупного проекта, то стоит рассматривать Angular в качестве основы. Он обеспечивает максимальную гибкость и скорость рендеринга. Огромный опыт других разработчиков позволит решить вопросы, которые обязательно возникнут при работе над приложением. React окажется слишком объемным, а для Vue.js еще не существует большого количества гайд-лайнов.
    4. Если к разработке в будущем будут привлекаться другие программисты, то Vue.js станет лучшим выбором. Ведь этот фреймворк не только прост для изучения, но и позволяет менять приложение без разрушения его архитектуры.
    5. Если для проекта предусматривается многоступенчатое обновление и расширение функциональности в будущем, то стоит использовать Vue.js или React из-за превосходной обратной совместимости.

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

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

    Читай также:

    • Зачем нужен Angular.js и почему именно он;
    • Rails 5 и Vue.js: как перестать мучаться с фронтендом и начать жить;
    • Как и зачем mkdev перешёл на Vue.js;
    • Топ-5 PHP-фреймворков — не JS единым.

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

    Маршрутизация проблемы в React-JS / реагируют-маршрутизатор-дом

    December 2020

    149 раз

    Я установил react-router на моем проекте через запустить следующий фрагмент кода в окне командной строки:

    НПМ установить реагируют-маршрутизатор

    Я обнаружил, что react-router успешно установлен , потому что не было ошибок при монтаже , а также выход был:

    На основе учебника , я установил мой index.js как следующий код:

    Теперь, когда я хочу, чтобы скомпилировать / построить мое приложение, происходит это ошибка:

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

    Фреймворки JavaScript: как их выбирать

    Перевод статьи Алины Архиповой “JavaScript Frameworks: How To Make Your Choice”.

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

    Чем больше появляется фреймворков, тем больше вокруг них споров. В сообществе разработчиков много говорится о том, какие фреймворки наиболее эффективны для фронтенд-разработки. Основываясь на нашем исследовании, мы определили пятерку самых обсуждаемых фреймворков JavaScript. Их мы и описали в этой статье. Также в ней мы поделимся опытом Yalantis: расскажем о том, какие фреймворки предпочитают наши фронтенд-разработчики.

    Обзор популярных фреймворков JavaScript

    Каждый месяц выходит новый JavaScript-фреймворк. У собственников продуктов могут возникнуть сложности с выбором. Фреймворки это необходимые инструменты во фронтенд-разработке. Их задача состоит в ускорении и облегчении рабочего процесса, а также в повышении его продуктивности. Поэтому выбор фреймворка сильно влияет на эффективность и производительность процесса разработки. Давайте сравним топовые фреймворки JavaScript.

    Angular

    Angular это полнофункциональный фреймворк, выпущенный в 2010 году Google. Компания продолжает регулярный выпуск обновлений. Например, в марте 2020 последняя версия, Angular 6, принесла много улучшений, включая новый движок рендеринга для более быстрых и меньших по размеру приложений.

    Сегодня Angular это один из самых популярных фронтенд-фреймворков. Многие разработчики выбирают Angular, поскольку рассматривают его как ключ к упрощению разработки. Благодаря его шаблонам специалисты по фронтенду могут с легкостью использовать Angular для создания динамических одностраничных веб-приложений со множеством изменяемых данных. Кроме того, в Angular есть Model-View-Controller (MVC, «Модель-Представление-Контроллер»), делающий тестирование более простым и доступным.

    React.js

    React.js это фреймворк, выпущенный командой Facebook в 2013 году. Крупные компании, включая Dropbox, PayPal, BBC, Atlassian и Instagram используют React в качестве основного инструмента фронтенда.

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

    Vue.js

    Vue.js это довольно новый фреймворк JavaScript, созданный Эваном Ю. Его главная цель – сделать разработку пользовательского интерфейса более организованной.

    Многие специалисты по фронтенду утверждают, что Vue.js это превосходный инструмент для новичков. Он очень прост для понимания, поскольку фокусируется на слоях представления. Vue.js работает без Babel – транспилятора, конвертирующего код JavaScript в старую версию ES5, которая запускается во всех браузерах. Отказ от использования Babel ускоряет разработку. Шаблоны Vue.js это валидный HTML, поэтому интеграция проходит легко. Этот фреймворк является хорошим решением для разработки легковесных приложений.

    Ember.js

    Фреймворк Ember.js был создан в 2011 году. Он был использован при создании сайтов многих хорошо известных компаний, включая Kickstarter, Heroku и LinkedIn.

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

    Next.js

    Next.js это необычный JavaScript-фреймворк. Он был разработан командой React в качестве дополнительного инструмента для рендеринга на стороне сервера. При работе с React и Next.js процесс разработки становится проще, как при использовании Vue.js.

    Next.js имеет такие достойные упоминания особенности как автоматическое разделение кода и маршрутизация на основе страницы на стороне клиента. Кроме того, Next.js имеет полную поддержку CSS (под названием styled-jsx) для значительного облегчения стилизации интерфейса пользователя.

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

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

    Какие фреймворки выбирают фронтенд-разработчики Yalantis

    Команда по фронтенд-разработке в Yalantis часто работает с JavaScript-фреймворками. За последние несколько лет мы испытали разнообразные фреймворки, чтобы найти наиболее эффективный и выгодный инструмент.

    Сегодня мы предпочитаем работать с двумя хорошо известными фреймворками JavaScript – Angular и React. Но почему именно с этими двумя? Давайте рассмотрим подробнее функционал, который они предлагают фронтенд-разработчикам.

    Angular

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

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

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

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

    Удобные шаблоны. Шаблоны в Angular представлены в HTML, так что разработчики могут создавать функциональные приложения даже если они не слишком хорошо знают JavaScript. Браузер обрабатывает шаблоны и генерирует инструкции рендеринга, также известные как директивы.

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

    Поддержка сильного сообщества. Фреймворк Angular это продукт Google, поэтому естественно, что у него много поклонников и людей, которые его поддерживают. Разработчики могут с легкостью найти множество советов в блогах и на форумах.

    Подобьем итоги. Фреймворк Angular это топовый инструмент для фронтенд-разработки, предоставляющий много разных функций. Создание приложений с помощью Angular выгодно и бизнесу, и разработчикам. Прежде всего, Angular поддерживается Google, так что этот фреймворк регулярно обновляется, а его функционал постоянно совершенствуется. Во-вторых, в отличие от многих других фреймворков, Angular доступен под лицензией MIT. Для бизнеса и разработчиков важно использовать лицензированные инструменты, поскольку они более надежны.

    React

    React это революционный JavaScript-фреймворк, который занимает лидирующие позиции в рейтингах фреймворков JavaScript. Он очень популярен среди пользователей GitHub, которые дали ему больше 95 тысяч звезд. Но что делает React таким особенным?

    Повышенная производительность. В React есть уникальная особенность под названием Virtual DOM, которая повышает эффективность написания кода. Когда разработчики делают небольшие изменения, им не нужно обновлять представление полностью. Изменения проходят через Virtual DOM, который делает повторный рендеринг только нужной части страницы. Такой подход занимает меньше времени и сохраняет силы разработчиков.

    JSX. Декларативный синтаксис JavaScript, который помогает создавать аккуратный и читаемый код. JSX также помогает комбинировать компоненты в один исполняемый файл.

    Легкость изучения. Если разработчики знают JavaScript, они могут сразу приступать к использованию React. Разработчики могут пропустить мануалы, поскольку React прост и хорошо организован. Чтобы стать специалистом по React, вам нужно будет познакомиться с JSX.

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

    Поддержка Facebook и сообщества. React курируется одним их технологических гигантов – Facebook. Команда Facebook знает, как работать со сложными веб-приложениями, поэтому фреймворк React ориентирован на увеличении производительности. Сообщество React одно из самых больших (если сравнивать с сообществами других популярных фреймворков для фронтенд-разработки). Есть много блогов, плагинов и SDK, имеющих отношение к React. Поэтому, если у разработчика возникнут какие-либо проблемы с этим фреймворком, он может с легкостью найти ответы в интернете.

    В общем, фреймворк React это эффективный инструмент для разработки интерфейса пользователя. Его функционал улучшает разработку путем снижения времени, нужного для написания кода, а это большое преимущество для бизнеса и разработчиков. Кроме того, React легок в изучении, так что разработчики могут начинать использовать его без предварительной подготовки. Наконец, у него есть отличная поддержка сообщества и Facebook, поэтому у этого фреймворка точно будут обновления и новые интересные функции.

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

    Топ-пост этого месяца:  Как создать hover эффекты в CSS с помощью переменных анимация кнопки, работа с градиентом
    Добавить комментарий