Всем привет!

Я вернулся с большим выпуском Web Maker. Но на этот раз речь не идет о каких-либо новых функциях или исправлениях. Речь идет о чем-то, что не видно ни одному конечному пользователю, но влияет на него одинаково - кодовая база. После 93 коммитов и добавления 17913 новых строк, я полностью перенес код веб-конструктора с простого JavaScript на Preact! 🔥

Почему фреймворк и почему Preact?

Я начал кодировать Web Maker на простом JavaScript не потому, что я не мог работать с какой-либо структурой, или потому, что у меня не было времени на ее настройку. Я сознательно решил написать ванильный JavaScript, потому что хотел увидеть, как далеко я могу зайти без какой-либо внешней инфраструктуры. И я счастлив, что он проработал почти 2 года! Узнайте больше о том, как я создал Web Maker.

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

Я выбрал Preact просто потому, что работал с Angular, Vue и React. Preact говорит, что работает как React с таким маленьким размером файла! Я хотел попробовать. Приятно иметь возможность создать что-то так удобно с библиотекой с таким маленьким размером :) И лучшая часть работы с JSX - это то, что Prettier форматирует это для меня! Я счастлив, что выбрал его.

Рефакторинг

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

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

Для CSS это тот же файл style.css, включенный в HTML. Никаких изменений. Но я планирую перевести большинство значений в переменные CSS, чтобы разрешить настройку и тематику.

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

Что дальше?

Рефакторинг был таким увлекательным! Я понял, что мне нравится рефакторинг гораздо больше, чем писать код. 😅 Теперь, когда он готов, я очень взволнован, чтобы в ближайшие недели создать несколько действительно крутых функций. Если у вас есть какие-либо просьбы о функциях или вы хотите спросить меня о переносе ванильного JS-приложения на Preact (или React, это похоже), напишите мне в Твиттере или оставьте здесь свои комментарии.