Cómo hacer mi propio marco front-end

No estoy seguro de qué tipo de marco te gustaría crear, pero si sigues las tendencias, probablemente quieras que esté basado en componentes. Los componentes web definitivamente valen la pena (WebComponents.org). Con solo un poquito de código de azúcar, puede hacer una buena base.

Si también desea jugar con los elementos nativos existentes, consulte la API MutationObserver (API MutationObserver). Con un MutationObserver puede crear ganchos que se ejecutan cuando se crea o se conecta un nodo. Estos ganchos pueden agregarle funcionalidades adicionales (piense en los atributos ng en angular, por ejemplo).

El enlace de datos es un tema controvertido, pero creo que es bueno tenerlo en un marco. Para un enfoque moderno, le sugiero que adquiera experiencia con ES6 Proxies (ES6 Proxies in Depth) y el objeto Reflect (ES6 Reflection in Depth). Los proxies le permiten atrapar operaciones de JavaScript como propiedad get / set o delete, mientras que Reflect expone estas operaciones de forma funcional. Al combinar los dos, puede crear proxies sin interrupciones que funcionan igual que los objetos JS normales, pero que registra cosas para usted en segundo plano. Este es un buen punto de partida para implementar el enlace de datos. Puede consultar mi pequeña biblioteca de enlace de datos para obtener ideas (RisingStack / nx-observe) si está interesado.

Otra característica común en los marcos modernos es la evaluación de cadenas de espacio aislado (piense en las expresiones angulares o aurelia JS en el HTML). Los desarrolladores suelen utilizar analizadores personalizados para evaluarlos. Si le gusta este enfoque, bellota es un excelente analizador JS (ternjs / bellota). Hice una pequeña biblioteca (sub 100 líneas) que resuelve la ejecución de espacio aislado de otra manera, usando algunas características JS menos conocidas (RisingStack / nx-compile).

Al combinar estas cuatro cosas, puede hacer un marco decente. Simplemente cree enlaces para DOM con Web Components y MutationObserver, luego vincule los nodos DOM junto con su javascript dentro de estos enlaces.

Si desea ver una implementación real, recientemente escribí un marco llamado NX. Es menos de 3000 líneas en total. Puede verificar la implementación en GitHub (RisingStack / nx-framework) y la página de inicio y los documentos aquí (marco NX).

Por supuesto, esta es solo una forma de hacerlo. Deberías hacerlo a tu manera, pero espero que esto pueda ayudarte a comenzar (:

Editar: Olvidé mencionar que estoy escribiendo una serie de artículos titulada ‘Escribir un marco’ actualmente. La primera parte está aquí: Escribir un marco de JavaScript – Estructuración de proyectos | @RisingStack