Ember, Ionic and Vanilla JS

Ember 94,851 (github.com/emberjs/ember.js (https://github.com/emberjs/ember.js 22,565 )) grew out of SproutCore 2.0 and took its name in December 2011. It is the most convention-driven framework here: Ember CLI generates routes, components and tests into fixed places, so developers move between Ember apps easily. Modern Ember builds with Vite 25,978 , keeps JavaScript and template together in .gjs files, and uses Glimmer @tracked properties for state. Ember 7 shipped in May 2026; create an app with npm 2,036 install -g ember-cli and ember new my-app.

Ionic 20,753 (github.com/ionic-team/ionic-framework (https://github.com/ionic-team/ionic-framework 52,684 )) is a library of mobile-styled UI components (<ion-card>, <ion-tabs>) for Angular 42,088 , React 7,897 , Vue 5,482 or plain JavaScript. Wrapped with Capacitor 243,123 (or the older Cordova 129 ), the web app is packaged for app stores and can call the camera, GPS and other native SDKs. Ionic 9 was released in August 2026.

Vanilla JS is the joke name for using no framework at all (the vanilla-js.com site parodies framework landing pages with a download of "0 bytes uncompressed, 25 bytes gzipped"). For small widgets it is often the right choice; every framework ends up calling the DOM APIs of HTML DOM APIs.

The todo component in vanilla JavaScript with a render() functionHTMLLive

<input id="text"> <button id="add"></button>
<ul id="list"></ul>
<script>
  const todos = [];
  const [text, add, list] = ['text', 'add', 'list'].map(id => document.getElementById(id));
  function render() {                    // view = f(state), rebuilt by hand
    add.textContent = `Add #${todos.length + 1}`;
    list.replaceChildren(...todos.map(t => {
      const li = document.createElement('li');
      li.textContent = t;                // textContent, not innerHTML: no XSS
      return li;
    }));
  }
  add.addEventListener('click', () => { todos.push(text.value); text.value = ''; render(); });
  render();
  for (const t of ['Buy milk', 'Read Section 1.12']) { text.value = t; add.click(); }
</script>

Browser output of Listing 1.71 — Browser output of 71

It is short, but you now own calling render() after every change, rebuilding the whole list (losing focus and scroll position in real lists) and escaping input. Frameworks automate exactly these chores, which pays off beyond a few interacting widgets.

MENU