# 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 subscription-based coding school - Main challenge: Develop newbie-friendly curriculum - Also challenge: Keep useful for advanced as well ### Previous positions - Industry: Experience at a various tech corps - Teaching: Lead classes at Trilogy / UC-Berkeley - Volunteer: Lead kid classes on Python, Scratch # Introducing: This presentation 1. Introductions 2. Problems 3. Solutions 4. Demos 5. Future 6. Questions ## Problems ## (aka, *Why yet another framework?*) # 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 - Progressive enhancement for backend apps - Static site generation - "Glue" language - Quick data viz, live-coding - Single page apps # DEMO ## Progressive enhancement for backend apps # DEMO ## SSG ``` npm init modulo ``` # DEMO ## "Glue" language # DEMO ## Art & music # DEMO ## Single page apps ## Questions? # Future ### Modulo.js - Code needs clean-up, commenting, reduce back under 2k lines - Fix (or exclude) reconciler directives `key=` and `ignore` ### modulocli - Compatibility with JSDOM and other faster backends - Quality-of-life features like watching for updates and hot-reloading ### Documentation - Provide Netlify and NetlifyCMS compatible SSG template - Document Component Part API, Library mechanics, modulocli, etc ### Beyond - Many more examples and pre-made example components - "Storybook-type" auto-documentation support - GUI editor (Declarative format allows for Scratch-like "no code")