Создайте свой собственный веб-фреймворк — Часть 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