Создайте свой собственный веб-фреймворк — Часть 1
Почему ты бы так поступил ?
Вы можете прочитать это намного лучше на моем личном сайте
Почему ??
Итак, я, очевидно, полюбил Remix. Но больше всего мне в нем нравится то, как он помог мне узнать об основах Интернета и даже заставил меня задуматься о том, «как мы создавали веб-сайты до появления экосистемы Javascript, которую я знаю и люблю?»
Конечно, ответ «в основном с PHP».
Несколько дней назад мне пришлось читать курс по PHP, поэтому я вернулся к нему после нескольких лет изучения Javascript и меня поразило, насколько его принципы схожи с Remix. (или наоборот конечно).
Единственное, что мешает мне наслаждаться, это отсутствие надлежащей системы шаблонов. Конкатенация строк html-тегов кажется мне такой неуклюжей, и я вообще не привык к синтаксису PHP.
Вот тогда я и подумал: «Разве не было бы здорово использовать этот олдскульный подход с более современными инструментами».
Под «более современными инструментами» я, конечно же, подразумеваю «с Javascript». 😁
И поскольку я начинаю писать все больше и больше статей, я подумал, что было бы здорово сделать это как можно более простым для изучения как для людей, использующих его, так и для людей, желающих понять, как это работает.
Что я хочу сделать
Я хочу создать инструмент, который будет прост в освоении и использовании и в котором широко используются основы Javascript и Интернета. Я не буду создавать веб-сервер, поэтому буду использовать Express, но постараюсь максимально использовать возможности Express.
То же самое касается системы шаблонов, я не хочу интегрировать JSX, поскольку Я чувствую, что `template string ${interpolation}
` достаточно мощный.
Этот инструмент должен позволить новичкам легко создавать веб-сайты, имея при этом хорошее понимание того, что происходит за кулисами, поэтому я хочу, чтобы мой исходный код был как можно более понятным.
Я знаю, что многие инструменты кажутся мне слишком волшебными (у Angular и даже Vue все еще есть части, в которых я не уверен на 100%), и я действительно хочу, чтобы пользователи чувствовали, что ничего не может пойти не так, потому что они знают весь процесс. .
Что я не хочу делать
Меня не волнует, будет ли этому инструменту не хватать функциональности, будет ли он слишком медленным или что-то в этом роде, я не хочу конкурировать с Remix совсем (в любом случае я бы не смог 😂)
Кроме того, это не имеет большого значения, если конечный пользовательский опыт не будет первоклассным. Если страница моргает на полсекунды при нажатии на кнопку, пусть будет так, в любом случае это то, что происходит со старым ванильным PHP.
Этот инструмент предназначен в первую очередь для обучения, но если он позволит людям создавать классные веб-сайты, я буду счастлив! Может быть, я попробую сделать с его помощью (что-то вроде) сложное веб-приложение, чтобы продемонстрировать, чего можно достичь.
Как я хочу, чтобы это работало
Во-первых, я составил список всех функций, которые, по моему мнению, необходимы в веб-фреймворке, и разделил их на две группы:
Обязательный
- Обслуживание html-файла (очевидно)
- Обслуживание статических ресурсов
- Наличие системы шаблонов (для условного рендеринга или циклов)
- Возможность запускать код Javascript на стороне сервера (и использовать этот код в шаблоне)
- Ответы на html-формы
Этого будет достаточно, чтобы создать красивый динамичный веб-сайт. Вы можете вычислить некоторые данные и логически отобразить их в своем файле.
Это своего рода голая кость, но это отличная основа для более продвинутых функций, которые появятся дальше.
Бонус
- Разрешение страниц макетов или фрагментов повторно используемых шаблонов (подумайте о компонентах в React или маршрутах макетов в Remix)
- Разрешение вложенных маршрутов и параметров маршрута (например,
/users/QuentinWidlocher/edit
) - Добавить локальное и глобальное состояние в приложение (локальное, как в состояниях на странице)
- Добавьте некоторую конфигурацию на сервер (каталог хостинга, изменение порта, страница ошибки по умолчанию и т. д.)
- Улучшение интерфейса разработчика (отображение ошибок, режим просмотра и т. д.)
Это выведет фреймворк на более высокий стандарт, но, надеюсь, сделает его довольно простым.
Эту версию я бы действительно использовал, а не только для обучения.
Нет колес, чтобы изобретать
Итак, как я уже сказал, мы постараемся минимизировать пользовательский код, насколько это возможно, поэтому давайте посмотрим, что не нужно и что можно заменить чем-то, что у нас уже есть:
Экспресс дает нам:
- Обслуживание файлов (html и статические ресурсы)
- Данные запроса (параметры запроса)
- Данные формы (разбор тела сообщения и формы для объекта)
- Динамические маршруты (с параметрами маршрута)
Javascript (и узел) дает нам:
- «Произвольное» выполнение кода (чтобы мы могли выполнять код из строки)
- Мощная и вложенная интерполяция строк с литералами шаблонов
- Асинхронный код легко с
async
/await
- Простой способ передать пропсы,
...spread
присвоив их аргументам функции. - Библиотеки для извлечения данных и взаимодействия с файлами в файловой системе.
Ого, столько всего нам не нужно делать правильно ? Что остается тогда?
- Обслуживание html-файлов и ресурсов на основе их маршрута
- Разбор кода сервера и получение значений
- Передайте эти значения в шаблон
- Интерпретация шаблона для получения строкового результата
- Найдите способ хранить состояния в каждом маршруте.
Это... в общем-то, наша работа будет состоять в том, чтобы связать воедино существующие функции, предоставляемые самой средой.
Отсутствие необходимости иметь дело с анализом шаблона и обслуживанием файлов — это намного меньше работы, чем это было бы.
В следующей части мы начнем с краткого обзора двух наших основных частей: Express и строк шаблона Javascript.
Спойлер: я уже создал этот инструмент 😅
Вы можете найти репозиторий на Github
Пока он не готов на 100%, но основные функции здесь
Зацените его и не стесняйтесь создавать issue или PR