Solid.js vs Ember Polaris Comparison

Reactivity

Reactivity is a core feature in both Solid.js and Ember Polaris, allowing developers to build dynamic and responsive applications. Let’s explore how each framework handles state declaration, updates, and computed properties.

Declare state

Solid.js

Name.jsx

import { createSignal } from "solid-js";

export default function Name() {
  const [name] = createSignal("John");

  return <h1>Hello {name()}</h1>;
}

In Solid.js, state is managed using signals, which are functions that return the current state and can be called to update it.

Ember Polaris

name.gjs

import Component from "@glimmer/component";

export default class NameComponent extends Component {
  name = "John";

  <template>
    <h1>Hello {{this.name}}</h1>
  </template>
}

In Ember Polaris, state is typically managed within components using class properties, which automatically update the UI when their values change.

Update state

Solid.js

Name.jsx

import { createSignal } from "solid-js";

export default function Name() {
  const [name, setName] = createSignal("John");
  setName("Jane");

  return <h1>Hello {name()}</h1>;
}

State updates in Solid.js are performed by calling the setter function returned by createSignal.

Ember Polaris

name.gjs

import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";

export default class CounterComponent extends Component {
  @tracked name = "John";

  constructor(owner, args) {
    super(owner, args);

    this.name = "Jane";
  }

  <template>
    <h1>Hello {{this.name}}</h1>
  </template>
}

In Ember Polaris, state updates are made by directly assigning new values to tracked properties, with the UI automatically reflecting the change.

Computed state

Solid.js

DoubleCount.jsx

import { createSignal } from "solid-js";

export default function DoubleCount() {
  const [count] = createSignal(10);
  const doubleCount = () => count() * 2;

  return <div>{doubleCount()}</div>;
}

Computed properties in Solid.js are functions that derive values from other state, recalculating when dependencies change.

Ember Polaris

double-count.gjs

import Component, { tracked } from "@glimmer/component";

export default class DoubleCount extends Component {
  @tracked count = 10;

  get doubleCount() {
    return this.count * 2;
  }

  <template>
    <div>{{this.doubleCount}}</div>
  </template>
}

In Ember Polaris, computed properties are defined using getter methods, allowing for dynamic updates based on other data.

Templating

Templating in both frameworks allows for the creation of reusable and dynamic UI components.

Minimal template

Solid.js

HelloWorld.jsx

export default function HelloWorld() {
  return <h1>Hello World!</h1>;
}

Ember Polaris

hello-world.gjs

<template>
  <h1>Hello world</h1>
</template>

Styling

Styling in Solid.js and Ember Polaris can be managed using CSS, with support for scoped styles and CSS modules.

Solid.js

CssStyle.jsx

import "./style.css";

export default function CssStyle() {
  return (
    <>
      <h1 class="title">I am red</h1>
      <button style={{ "font-size": "10rem" }}>I am a button</button>
    </>
  );
}

style.css

.title {
  color: red;
}

Ember Polaris

css-style.gjs

<template>
  <h1 class="title">I am red</h1>
  <button style="font-size: 10rem;">I am a button</button>

  <style>
    .title {
      color: red;
    }
  </style>
</template>

Loop

Loops in both frameworks allow for the iteration over collections to dynamically generate UI elements.

Solid.js

Colors.jsx

import { For } from "solid-js";

export default function Colors() {
  const colors = ["red", "green", "blue"];

  return (
    <ul>
      <For each={colors}>{(color) => <li>{color}</li>}</For>
    </ul>
  );
}

Ember Polaris

colors.gjs

const colors = ["red", "green", "blue"];

<template>
  <ul>
    {{#each colors as |color|}}
    <li>{{color}}</li>
    {{/each}}
  </ul>
</template>

Event click

Event handling in Solid.js and Ember Polaris is intuitive, allowing developers to respond to user interactions.

Solid.js

Counter.jsx

import { createSignal } from "solid-js";

export default function Counter() {
  const [count, setCount] = createSignal(0);

  function incrementCount() {
    setCount(count() + 1);
  }

  return (
    <>
      <p>Counter: {count()}</p>
      <button onClick={incrementCount}>+1</button>
    </>
  );
}

Ember Polaris

counter.gjs

import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";
import { on } from "@ember/modifier";

export default class Counter extends Component {
  @tracked count = 0;

  incrementCount = () => this.count++;

  <template>
    <p>Counter: {{this.count}}</p>
    <button {{on "click" this.incrementCount}}>+1</button>
  </template>
}

Dom ref

DOM references in both frameworks allow for direct manipulation of DOM elements.

Solid.js

InputFocused.jsx

import { onMount } from "solid-js";

export default function InputFocused() {
  let inputElement;

  onMount(() => inputElement.focus());

  return <input ref={inputElement} type="text" />;
}

Ember Polaris

input-focused.gjs

import { modifier } from "ember-modifier";

const autofocus = modifier((element) => element.focus());

<template>
  <input {{autofocus}} />
</template>

Conditional

Conditional rendering in Solid.js and Ember Polaris allows for dynamic UI updates based on application state.

Solid.js

TrafficLight.jsx

import { createSignal, Switch, Match } from "solid-js";

const TRAFFIC_LIGHTS = ["red", "orange", "green"];

export default function TrafficLight() {
  const [lightIndex, setLightIndex] = createSignal(0);

  const light = () => TRAFFIC_LIGHTS[lightIndex()];

  function nextLight() {
    setLightIndex((lightIndex() + 1) % TRAFFIC_LIGHTS.length);
  }

  return (
    <>
      <button onClick={nextLight}>Next light</button>
      <p>Light is: {light()}</p>
      <p>
        You must
        <Switch>
          <Match when={light() === "red"}>
            <span>STOP</span>
          </Match>
          <Match when={light() === "orange"}>
            <span>SLOW DOWN</span>
          </Match>
          <Match when={light() === "green"}>
            <span>GO</span>
          </Match>
        </Switch>
      </p>
    </>
  );
}

Ember Polaris

traffic-light.gjs

import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";
import { on } from "@ember/modifier";
import { eq } from 'ember-truth-helpers';

const TRAFFIC_LIGHTS = ["red", "orange", "green"];

export default class TrafficLight extends Component {
  @tracked lightIndex = 0;

  get light() {
    return TRAFFIC_LIGHTS[this.lightIndex];
  }

  nextLight = () => {
    this.lightIndex = (this.lightIndex + 1) % TRAFFIC_LIGHTS.length;
  };

  <template>
    <button {{on "click" this.nextLight}}>Next light</button>
    <p>Light is: {{this.light}}</p>
    <p>
      You must
      {{#if (eq this.light "red")}}
        STOP
      {{else if (eq this.light "orange")}}
        SLOW DOWN
      {{else if (eq this.light "green")}}
        GO
      {{/if}}
    </p>
  </template>
}

Lifecycle

Lifecycle hooks in both frameworks provide a way to execute code at specific points in a component’s lifecycle.

On mount

Solid.js

PageTitle.jsx

import { createSignal, onMount } from "solid-js";

export default function PageTitle() {
  const [pageTitle, setPageTitle] = createSignal("");

  onMount(() => {
    setPageTitle(document.title);
  });

  return <p>Page title: {pageTitle()}</p>;
}

Ember Polaris

page-title.gjs

const pageTitle = () => document.title;

<template>
  <p>Page title is: {{(pageTitle)}}</p>
</template>

On unmount

Solid.js

Time.jsx

import { createSignal, onCleanup } from "solid-js";

export default function Time() {
  const [time, setTime] = createSignal(new Date().toLocaleTimeString());

  const timer = setInterval(() => {
    setTime(new Date().toLocaleTimeString());
  }, 1000);

  onCleanup(() => clearInterval(timer));

  return <p>Current time: {time()}</p>;
}

Ember Polaris

time.gjs

import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";
import { registerDestructor } from "@ember/destroyable";

export default class Time extends Component {
  @tracked time = new Date().toLocaleTimeString();

  constructor(owner, args) {
    super(owner, args);

    let timer = setInterval(() => {
      this.time = new Date().toLocaleTimeString();
    }, 1000);

    registerDestructor(this, () => clearInterval(timer));
  }

  <template>
    <p>Current time: {{this.time}}</p>
  </template>
}

Component composition

Component composition in Solid.js and Ember Polaris allows for the creation of complex UIs from smaller, reusable components.

Props

Solid.js

App.jsx

import UserProfile from "./UserProfile.jsx";

export default function App() {
  return (
    <UserProfile
      name="John"
      age={20}
      favouriteColors={["green", "blue", "red"]}
      isAvailable
    />
  );
}

Ember Polaris

app.gjs

import UserProfile from "./user-profile.gjs"; const favoriteColors = ["green",
"blue", "red"];

<template>
  <UserProfile
    @name="John"
    @age="{{20}}"
    @favouriteColors="{{favoriteColors}}"
    @isAvailable="{{true}}"
  />
</template>

Emit to parent

Solid.js

App.jsx

import { createSignal } from "solid-js";
import AnswerButton from "./AnswerButton.jsx";

export default function App() {
  const [isHappy, setIsHappy] = createSignal(true);

  function onAnswerNo() {
    setIsHappy(false);
  }

  function onAnswerYes() {
    setIsHappy(true);
  }

  return (
    <>
      <p>Are you happy?</p>
      <AnswerButton onYes={onAnswerYes} onNo={onAnswerNo} />
      <p style={{ "font-size": "50px" }}>{isHappy() ? "😀" : "😥"}</p>
    </>
  );
}

Ember Polaris

answer-button.gjs

import { on } from "@ember/modifier";

<template>
  <button {{on "click" @onYes}}> YES </button>
  <button {{on "click" @onNo}}> NO </button>
</template>

Slot

Solid.js

App.jsx

import FunnyButton from "./FunnyButton.jsx";

export default function App() {
  return <FunnyButton>Click me!</FunnyButton>;
}

Ember Polaris

app.gjs

import FunnyButton from "./funny-button";

<template>
  <FunnyButton> Click me! </FunnyButton>
</template>

Slot fallback

Solid.js

App.jsx

import FunnyButton from "./FunnyButton.jsx";

export default function App() {
  return (
    <>
      <FunnyButton />
      <FunnyButton>I got content!</FunnyButton>
    </>
  );
}

Ember Polaris

app.gjs

import FunnyButton from "./funny-button";

<template>
  <FunnyButton />
  <FunnyButton>I got content!</FunnyButton>
</template>

Context

Context management in Solid.js and Ember Polaris allows for the sharing of data and functionality across components.

Solid.js

App.jsx

import { createSignal } from "solid-js";

import { UserContext } from "./UserContext";
import UserProfile from "./UserProfile";

export default function App() {
  const [user, setUser] = createSignal({
    id: 1,
    username: "unicorn42",
    email: "unicorn42@example.com",
  });

  function updateUsername(newUsername) {
    setUser({ ...user(), username: newUsername });
  }

  return (
    <>
      <h1>Welcome back, {user().username}</h1>
      <UserContext.Provider value={[user, updateUsername]}>
        <UserProfile />
      </UserContext.Provider>
    </>
  );
}

Ember Polaris

app.gjs

import UserProfile from "./user-profile";

<template>
  <UserProfile />
</template>

Form input

Form inputs in both frameworks support two-way data binding, making it easy to manage form state.

Input text

Solid.js

InputHello.jsx

import { createSignal } from "solid-js";

export default function InputHello() {
  const [text, setText] = createSignal("Hello world");

  function handleChange(event) {
    setText(event.target.value);
  }

  return (
    <>
      <p>{text()}</p>
      <input value={text()} onInput={handleChange} />
    </>
  );
}

Ember Polaris

input-hello.gjs

import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";
import { on } from '@ember/modifier';

export default class InputHello extends Component {
  @tracked text = "Hello World";

  handleInput = (event) => (this.text = event.target.value);

  <template>
    <p>{{this.text}}</p>
    <input value={{this.text}} {{on "input" this.handleInput}} />
  </template>
}

Checkbox

Solid.js

IsAvailable.jsx

import { createSignal } from "solid-js";

export default function IsAvailable() {
  const [isAvailable, setIsAvailable] = createSignal(false);

  function handleChange() {
    setIsAvailable((previousValue) => !previousValue);
  }

  return (
    <>
      <input
        id="is-available"
        type="checkbox"
        checked={isAvailable()}
        onChange={handleChange}
      />
      <label for="is-available">Is available</label>
    </>
  );
}

Ember Polaris

is-available.gjs

import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";
import { on } from '@ember/modifier';

export default class InputHello extends Component {
  @tracked isAvailable = false;

  handleChange = (event) => (this.isAvailable = event.target.checked);

  <template>
    <input
      id="is-available"
      type="checkbox"
      checked={{this.isAvailable}}
      {{on "change" this.handleChange}}
    />
    <label for="is-available">Is available</label>
  </template>
}

Radio

Solid.js

PickPill.jsx

import { createSignal } from "solid-js";

export default function PickPill() {
  const [picked, setPicked] = createSignal("red");

  function handleChange(event) {
    setPicked(event.target.value);
  }

  return (
    <>
      <div>Picked: {picked()}</div>
      <input
        id="blue-pill"
        checked={picked() === "blue"}
        type="radio"
        value="blue"
        onChange={handleChange}
      />
      <label for="blue-pill">Blue pill</label>

      <input
        id="red-pill"
        checked={picked() === "red"}
        type="radio"
        value="red"
        onChange={handleChange}
      />
      <label for="red-pill">Red pill</label>
    </>
  );
}

Ember Polaris

pick-pill.gjs

import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";
import { on } from '@ember/modifier';
import { eq } from 'ember-truth-helpers';

export default class PickPill extends Component {
  @tracked picked = "red";

  handleChange = (event) => (this.picked = event.target.value);

  <template>
    <div>Picked: {{this.picked}}</div>

    <input
      id="blue-pill"
      type="radio"
      value="blue"
      checked={{eq this.picked "blue"}}
      {{on "change" this.handleChange}}
    />
    <label htmlFor="blue-pill">Blue pill</label>

    <input
      id="red-pill"
      type="radio"
      value="red"
      checked={{eq this.picked "red"}}
      {{on "change" this.handleChange}}
    />
    <label htmlFor="red-pill">Red pill</label>
  </template>
}

Select

Solid.js

ColorSelect.jsx

import { createSignal, For } from "solid-js";

const colors = [
  { id: 1, text: "red" },
  { id: 2, text: "blue" },
  { id: 3, text: "green" },
  { id: 4, text: "gray", isDisabled: true },
];

export default function ColorSelect() {
  const [selectedColorId, setSelectedColorId] = createSignal(2);

  function handleChange(event) {
    setSelectedColorId(event.target.value);
  }

  return (
    <select value={selectedColorId()} onChange={handleChange}>
      <For each={colors}>
        {(color) => (
          <option value={color.id} disabled={color.isDisabled}>
            {color.text}
          </option>
        )}
      </For>
    </select>
  );
}

Ember Polaris

color-select.gjs

import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";
import { on } from '@ember/modifier';

export default class ColorSelect extends Component {
  @tracked selectedColorId = 2;

  select = (event) => (this.selectedColorId = event.target.value);

  isSelected = (colorId) => this.selectedColorId === colorId;

  colors = [
    { id: 1, text: "red" },
    { id: 2, text: "blue" },
    { id: 3, text: "green" },
    { id: 4, text: "gray", isDisabled: true },
  ];

  <template>
    <select {{on "change" this.select}}>
      {{#each this.colors as |color|}}
        <option
          value={{color.id}}
          disabled={{color.isDisabled}}
          selected={{this.isSelected color.id}}
        >
          {{color.text}}
        </option>
      {{/each}}
    </select>
  </template>
}

Webapp features

Webapp features in both frameworks include data fetching and rendering, with support for asynchronous operations.

Render app

Solid.js

index.html

<!DOCTYPE html>
<html>
  <body>
    <div id="app"></div>
    <script type="module" src="./main.jsx"></script>
  </body>
</html>

main.jsx

App.jsx

Ember Polaris

Missing snippet

Fetch data

Solid.js

App.jsx

import { createResource, For, Switch, Match } from "solid-js";

async function fetchUsers() {
  return (await fetch("https://randomuser.me/api/?results=3")).json();
}

export default function App() {
  const [data] = createResource(fetchUsers);
  const users = () => data()?.results;

  return (
    <Switch>
      <Match when={data.loading}>
        <p>Fetching users...</p>
      </Match>
      <Match when={data.error}>
        <p>An error occurred while fetching users</p>
      </Match>
      <Match when={users()}>
        <ul>
          <For each={users()}>
            {(user) => (
              <li>
                <img src={user.picture.thumbnail} alt="user" />
                <p>
                  {user.name.first} {user.name.last}
                </p>
              </li>
            )}
          </For>
        </ul>
      </Match>
    </Switch>
  );
}

Ember Polaris

Missing snippet

Decouvrez plus d’Offres de la plateform ItGalaxy.io :

Découvrez notre gamme complète de services et formations pour accélérer votre carrière.

1. Nous contactez

Description: Besoin de Formation et des Solutions cloud complètes pour vos applications
Links:
- Nous contactez

2. Infra as a Service

Description: Infrastructure cloud évolutive et sécurisée
Links:
- Demandez un devis

3. Projets Développeurs

Description: Découvrez des opportunités passionnantes pour les développeurs
Links:

4. Développeurs

Description: Rejoignez notre communauté de développeurs
Links:
- DevOps
- Web
- Backend
- SEO
- Design
- Mobile
- Wordpress
- Shopify

5. Formations Complètes

Description: Accédez à des formations professionnelles de haute qualité
Links:

6. Marketplace

Description: Découvrez notre place de marché de services
Links:

7. Blogs

Description: Découvrez nos blogs
Links: