Этот пост предназначен только для шутки и не означает вреда ни одному из инструментов и библиотек, упомянутых ниже. Я использую их все время, это потрясающе, и я всегда их рекомендую.
Это в значительной степени вдохновлено сообщением в блоге CircleCI «Это будущее» и выражает то же самое с другой точки зрения.
Эй, я бы хотел научиться писать многофункциональные веб-приложения. Я слышал, у вас есть некоторый опыт в этой области.
: Ага. Я занимаюсь фронтендом и использую несколько инструментов и техник для создания веб-приложений.
Прохладный. В настоящий момент я создаю простое веб-приложение - обычное приложение TODO с использованием HTML, CSS и JavaScript, и я планирую использовать JQuery. Это путь?
: О нет. Это старая школа. JQuery мертв - его больше никто не использует. Вам нужно использовать React сейчас. Это будущее.
Ой. Хорошо. Что это такое ?
: React - это новый способ создания веб-приложений. Он использует реализацию Virtual DOM и позволяет писать код JSX.
Виртуальный… что? JSX? Что это такое ?
: JSX - HTML на стероидах. Это расширенная версия JavaScript, в которой вы смешиваете XML и JS в одном коде. VirtualDOM - у вас будет дерево настраиваемых объектов, представляющих часть DOM, и оно дает возможность очень быстро манипулировать этими объектами, не касаясь фактического DOM.
Что такое смешивание XML и JS?
: Хорошо. Смотреть. React - это будущее. Он позволяет создавать компоненты как объекты многократного использования.
Ой. То есть вы имеете в виду как Backbone views?
: Нет. Магистраль мертва. Теперь все будет компонентами.
Так. Мне не нужно знать о JSX или VirtualDOM?
: Нет. Вам по-прежнему необходимо знать основные концепции, чтобы вы могли писать код, не беспокоясь о том, что операции будут дорогостоящими, и оптимизировать те места, где он будет на самом деле, например состояние компонента.
Хорошо. Я здесь заблудился. Есть такая штука для создания компонентов, которая называется React. Могу ли я использовать его с JQuery?
: Хорошо. React позволяет создавать только часть приложения, а остальное - по вашему выбору. Но я сказал вам, что JQuery мертв. Вы хотите использовать веб-пакет для объединения ваших компонентов.
OK. Что это такое?
: Это сборщик модулей. Вы пишете кучу файлов, как пишете модули узлов, и просто объединяете их, чтобы сформировать один файл / блоки файлов для обслуживания клиента. Кроме того, вам даже не нужны инструменты для реагирования, вам просто нужен babel для компиляции JSX.
Вавилон?
: Ага. Вавилон. Это замечательный инструмент, который может преобразовать ваш код ES6 +, JSX в читаемый код ES5 с поддержкой sourceMaps, и он широко распространен даже в Facebook.
ES6+ ?
: ES6 / ES2015 - это следующая версия EcmaScript, в которой есть так много новых функций, как классы, стрелочные функции, карты, наборы и т. Д.… Почти каждый использует код ES6 + для написания своих приложений.
Это хорошо ?
: Конечно хорошо. ES6 + + транспиляция - это будущее.
Хорошо. Как мне его использовать?
: Вы начинаете с установки Node…
Установить узел? Нет-нет-нет… Вы что-то говорили о React и компонентах.
: Ага. Итак, у вас есть шаблон архитектуры приложения flux, и вы создаете свои действия, хранилища и компоненты…
Поток?
: Используя flux, вы создаете свое приложение в виде хранилищ, действий и представлений, в которых поток данных идет в одном направлении. Представления запускают действия, которые проходят через диспетчер и сохраняют прослушивание диспетчера и генерируют события изменения, которые представление снова прослушивает.
Ах. Нравится MVC?
: Нет. MVC мертв. Flux - это будущее. Существует множество различных реализаций flux.
Какие? Реализация Flux?
: Ага. Флюс - это узор. Просто найдите его: #alt, #flummox, #marty, #fluxxor, #fluxible и т. Д.… И есть Диспетчер, который реализует Facebook.
Почему бы мне просто не использовать фейсбук?
: Сложно эффективно написать весь шаблонный код для новичка, поэтому вы начнете с одной из существующих реализаций.
OK. Ага. Я действительно не хочу делать жесткий шаблонный код.
: Хорошо. Ага. Как я уже сказал, есть некоторые существующие реализации.
А как насчет угловых?
: Ew
Ew?
: Ew
Смотреть. Я действительно не хочу испытывать головную боль при загрузке сложного кода.
: Нет. Это действительно просто. Есть несколько стартовых наборов / репозиториев, или есть несколько генераторов, которые сделают это за вас.
Мне нужен генератор? Йомен? Что это такое ?
: Он может генерировать для вас код, и вы можете использовать его для создания нескольких приложений. Используйте новую поддержку DLL в webpack, чтобы создавать каждое приложение по отдельности или вместе.
У меня будет только одно приложение, страница или компонент, что угодно. Только один из них
: Нет. Изучите составные компоненты. Вот как мы сейчас все делаем. Вам нужно разбить на компоненты - по одному на каждую небольшую сущность.
Это кажется чрезмерным
: Это единственный способ убедиться, что он чистый, удобный для разработчиков и эффективный. Таким образом, вы можете выполнять такие операции, как "горячая перезагрузка"…
Горячая перезагрузка? Нравится livereload?
: Нет. Webpack поддерживает эту удивительную функцию, называемую горячей заменой модуля, и есть загрузчик react-hot-loader для реакции, где вы можете настроить отдельный компонент отдельно, не перезагружая всю страницу. А с вашими действиями flux вы можете делать сумасшедшие вещи, например воспроизводить свои действия, легко редактируя код в реальном времени.
Хорошо. Итак, у меня есть десятки инструментов и библиотек для сборки, компоновки, транспиляции и т. Д. Что теперь?
: Я говорил. Flux - позволяет хорошо спроектировать ваши приложения. С данными Observables и Immutable все становится лучше и интереснее.
Наблюдаемый? Мне нужны неизменяемые данные?
: Вам нужны наблюдаемые объекты для аккуратной обработки событий и некоторых других асинхронных вызовов, а также неизменяемые данные для обеспечения устойчивости, эффективности и простоты. Наблюдаемые - это примитивы асинхронного множественного числа, аналогичные массивам в синхронном мире. Ожидается, что наблюдаемые будут возвращаемыми значениями функции асинхронного генератора ES2016.
Что такое асинхронный генератор?
: Смотрите. Функция генератора модифицирует функцию и заставляет ее возвращать несколько значений, модификатор async заставляет функцию передавать их значения в будущем. Таким образом, функция асинхронного генератора представляет собой комбинацию обоих - в будущем дает несколько значений. Но автор, Джафар Хусейн, отозвал это предложение и работает с Кевином Смитом над предложением ES7 / ES2016 с меньшим охватом, которое можно было бы наблюдать.
Вздох. Я просто хочу запустить простое приложение. Насколько это становится глубже?
: Хорошо. Вы можете использовать RxJS, который близок к наблюдаемой спецификации. Он широко используется и готов к производству.
RxJS? Почему это полезно?
: Это хорошо сочетается с вашими существующими обещаниями, экосистемой событий. Вы можете создать Observable из любого асинхронного кода и относиться к нему как к первоклассному гражданину, передавать, обрабатывать асинхронные значения, обрабатывать ошибки и т. Д. Что ж, если вы ищете что-то действительно реактивное и интересное, проверьте структуру цикла от Андре Стальц.
Черт возьми. Я просто хочу создать простое приложение и продемонстрировать его. Смогу ли я это сделать?
: Конечно. Я имею в виду, что развертывание этого может быть еще одной интересной темой, но в основном вы там.
Понятно. Хорошо. Думаю, я кое-что понял. Спасибо за объяснение.
: Отлично! Нет проблем
Позвольте мне просто повторить кое-что из того, что я правильно понял.
: Конечно!
Поэтому мне нужно разделить код моего приложения на действия, хранилища и компоненты, следующие одному направленному потоку данных, написать код ES6 +, который позволил бы мне использовать новейшие функции и позволить мне написать чистый код, использовать babel для преобразования этого кода ES6 + в код ES5, который все браузеры могут анализировать, использовать webpack для объединения всех файлов, написанных как модули узлов, использовать ImmutableJS для представления всех моих данных и RxJS для всех моих событий и других асинхронных функций.
: Да. Разве это не великолепно?
Думаю, я забыл про статический контент и минификацию.
: Совсем не проблема. Webpack позволяет их импортировать. Все, что вам нужно сделать, это настроить некоторые загрузчики, плагины, и в основном все готово. Вы можете импортировать таблицы стилей и изображения на уровне компонентов и использовать их с этой настройкой. Существуют и другие альтернативы таблицам стилей, в которых вы можете писать CSS на JS.
Я возвращаюсь к JQuery.
