Meta-OS: The Perfect Framework

Full-Stack HTML/CSS/JavaScript Deployment
Comparing the Stacks
Meta-OS (Tiny Templating and bundled libraries), versus equivalent "Hello World" installations with Angular and React.
The comparison is a little unfair - Angular and React offer far fewer features out of the box. Others are similarly heavy in terms of server cost and stack complexity: Vue: 199MB, Marko: 107MB, Ember: 97MB, Aurelia: 85MB.
All these frameworks, despite their size, are missing many of the basics inside Meta-OS.

Why Meta-OS?

Build Tools...
...are annoying
  • get rid of them and build on the fly in a second :)

  • ...don't create standalone portable apps
  • enable "Electron mode".

  • CSS Preprocessors...
    ...force you to learn a new language, and don't compress the CSS
  • KISS! Smart coders avoid bloatware like SCSS, and WebComponents - because we like the C in CSS. Adding new attributes to STYLE nodes gives us all we need for efficient, compressed, auto-prefixed CSS.

  • ...forgot about theming
  • enable instant global switching of button styles, colours, 3D backgrounds, fonts and zoom.

  • HTML Templators...
    ...force you to learn a new language
  • KISS! Code up super widgets in plain old HTML5, which are turbocharged when parsed.

  • ...forgot about client-side rendering
  • provide a templating engine that runs on web browsers - with all quirks taken care of :)

  • ...drop support for old browsers
  • send an extra 44k polyfill to IE9 users, so they can view the site without CSS enchancements. Provide a no-script version of each page for text-only browsers.

  • ...cannot compress their output or send multiple pages at once
  • send a cachable compressed archive of all templates and styles after loading, then going from page to page is instantaneous.

  • API Designs...
    ...are a mess
  • KISS! We are using JS for server and client libraries, so by choosing MongoDB as our database, those commands are also written in JS :)  We can safely run queries remotely from the browser, and filter out forbidden commands on the server.

  • ...assume TLS is secure
  • encrypt all comms in a way that makes HTTPS a superfluous luxury.

  • ...don't cater for drip-feeding required imports on-demand
  • create a solid clientside import/require equivalent, that gives you what you need, and remembers what you've got.

  • Application life cycle
    Flux and Redux are horribly complicated. It's only a fucking WebApp!
  • Use TiTe instead. Provide essential shortcut methods, but allow devs to work alongside horrors like jQuery.

  • Full-Stack "Solutions"...
    ...cause more problems than they solve
  • stick with 3 languages: HTML, Javascript and CSS. Use key ES6 features which are auto-ES5-ized to support even good old Internet Explorer 9.

  • ...mash up HTML, CSS and Javascript together in weird new langauges
  • ensure that templating, styling and logic have clear boundaries. Don't force people to work on the DOM or stylesheets using JSX, Sass or other short-lived languages.

  • ...are massive, and require more knowledge than the average coder can be expected to know
  • if one person can understand the whole system, and the distro fits on a floppy disk, it's gotta be easier to learn than most.

  • ...contain huge, bug-ridden 3rd-party modules
  • hand pick the best and absolutely necessary, and rewrite anything that can be improved.

  • ...don't come with the range of apps you would expect with an operating system
  • provide a file browser with multimedia support, administration tools and at least one game :)

  • MVC...
    ...is totally inapplicable to webapps
  • keep the server dumb and the client smart.

  • ...transmits irrevelant minutia about the client and mirrors it serverside
  • use the server purely for serving - the client can look after itself

  • Interfaces and Libraries...
    ...are stuck in the stone age
  • move beyond standard HTML with TiTe. Present an intuitive shell, and do the heavy-lifting for web designers. Provide useful components, like the new <area> tag and the by-example helpsystem - populated simply by adding help atttributes to elements.

  • ...all do mobile badly
  • be mobile-perfect out of the box, and use a Service Worker to enable the installation of a PWA for offline browsing.

  • ...all copy iOS
  • think differently.

  • ...are slow
  • Slash the overhead for inital page download to 32KB for flat HTML and 64KB for interactive PWAs.

  • ...don't do instantaneous navigation using hashChange and pushState, or remember scrollbar positions
  • provide a simple mechanism for geniune navigation or auto-navigation of all types.

  • Conclusion
    Use Meta-OS.
  • The only stack with all this, plus a multi-player, multidimensional filesystem with plug-ins for groups, chat, events, contacts, tasks, markets and questionnaires, AND media editors, a world map, and library components.

  • What's so good about this web environment?

    Meta-OS has been built over many years and incarnations, with one goal for players: an arcade experience; and three goals for developers: rapid development, easy mantainence and a small enough codebase for a single person to grasp.



    Build Tools

    CSS Preprocessors

    HTML Templators

    API Designs

    Application life cycle

    Full-Stack "Solutions"


    Interfaces and Libraries

    Vanilla JS Articles