# modulo.js >  > ### [https://modulojs.org](https://modulojs.org) > *A newbie-friendly and dependency-free JavaScript framework* ##  # Introducing: Presenter >  *Michael Bethencourt (he/him)* ### Current position - Curriculum dev + instruction - Kickstart Coding, a hybrid coding school - Challenge: Develop curriculum for a big skill range (both newbies and adv., job hunters, etc) ### Previous positions - Industry: Experience at a various tech corps - Teaching: Lead classes (UC-Berkeley / Trilogy) - Volunteer: Kid classes on Python, Scratch # Introducing: This presentation 1. Introductions 2. Problems 3. Solutions 4. Demos 5. Future 6. Questions ## Problems # Teaching is hard Pre-requisites of modern frameworks make it harder. ### Tech stack pre-reqs - Most suggested setups are "all or nothing" (no "ramp-up") - Results in ubiquity of frameworks with easy ramp-up (e.g. jQuery, PHP) ### Skill pre-reqs - Most are CLI-focused and require compilation for development - Results in requiring JS and CLI skill pre-reqs for HTML changes ### Changing pre-reqs - Many frontend frameworks frequently switch syntaxes (JSX, TS, ES5), API changes, and terminology (e.g. especially jargon around async and state) - Results in fractured docs / tutorials and less transferable skills # Frontend is hard Many popular frontend frameworks can be hard to use in certain situations. ### Dependencies galore - Heavy `node_modules`, and resource-intensive builds - Results in slower dev, un-auditable code, launch disasters (e.g. `left-pad`) ### Difficulty with integration into backend apps - Hybrid apps are clunky to develop - Results in fragile mounting and build systems, perpetual SPA rewrites ### Difficulty in project and team management - "Mere mortals" on-boarding problems with complex FE tech - Results in hard-to-fill roles and poor communication ## Observation: Both are hard for overlapping reasons ## Solution? # Introducing: Modulo.js > ### Approach > - Declarative > - Compositional > - Middleware > - Component > - State management > - Templating > - Batteries included > - HTML first ### Goals - Simple - Educational - Ramp up ### Uses - Static site generation / "JAMStack" - "Glue" language - Quick data viz, live-coding - Single page apps - Progressive enhancement for backend apps # DEMO ## Hello World # DEMO ## "Glue" language # DEMO ## "Component Part" Middleware # DEMO ## Demo Gallery # DEMO ## JAMStack Template Starts "JAMStack" ``` npm init modulo ``` # Future ### Modulo.js - Fix reconciler directives and bugs - Finish documenting core API and extension ### create-modulo and modulocli - Compatibility with JSDOM and other faster backends - Quality-of-life features like on-the-fly re-building, and hot-reloading ### Beyond - Many more examples and pre-made example components - "Storybook-type" auto-documentation support - GUI editor (Declarative format allows for Scratch-like "no code") ## Questions?