1up
player one proudly presents
Home

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.
Others are similarly heavy in terms of server cost and stack complexity: Vue: 199MB, Ember: 97MB, Aurelia: 85MB.
All these frameworks, despite their size, are missing many of the features of 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 removing the C from CSS with WebComponents. Adding new attributes to STYLE elements gives us all we need for efficient, compressed, auto-prefixed CSS.

  • ...forgot about theming
  • enable instant global switching of button styles, 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 works on the browser too - with all browser discrepancies taken care of :)

  • ...drop support for old browsers
  • send an extra 44k polyfill to IE8/9 users, so they can at least view text & images, and use forms. 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 make going from page to page 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 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 8.

  • ...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

  • Web GUIs 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 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, AND plug-in components like chat, calendar, contacts, world map, groups, media player, tasks, library, and painter.



  • What's so good about this web environment?

    Meta-OS has been built over many years and incarnations, with one goal for the user: an arcade experience in an app; and two goals for the developer: rapid development and easy mantainence.

    Contents

    Top

    Build Tools

    CSS Preprocessors

    HTML Templators

    API Designs

    Application life cycle

    Full-Stack "Solutions"

    MVC

    Web GUIs and Libraries