SolidJS on the Internet Computer
- written by Roland BOLE (Instructor)
This is an announcement for a new starter kit ic-solidjs that I recently published on Github.
Blog image

👋 Happy to share my new starter kit

What does the Starter Kit Contain?

This starter kit shows how to communicate with an Internet Computer backend canister using SolidJS. Both canisters, the frontend asset canister and the backend Motoko canister, run on the Internet Computer. The example shows a local deployment or a deployment to the Motoko playground.

The Motoko canister contains a simple sayHelloTo function. On the SolidJS frontend a form collects a name, sends it to the Internet Computer backend canister and displays the response under the form. During the process a simple loading … information is displayed.

The example shows also some SolidJS specific functionality like:

  • Routing (lazy loading routes)
  • Signals (for updating the result and displaying the loading information)
  • Action (for POST forms)

If you do not know SolidJS, below are some reasons to learn something new.

Short Teaser about SolidJS

SolidJS is a declarative JavaScript library for building efficient and flexible user interfaces, distinguished by its fine-grained reactivity system and compilation step that delivers unmatched performance.

Unlike other JavaScript frameworks that rely on a virtual DOM diffing algorithm, SolidJS compiled templates down to real DOM instructions, eliminating the need for a virtual DOM altogether. This approach not only reduces the overhead associated with keeping a virtual DOM in sync with the real DOM but also enables more predictable and optimized updates to the UI.

Why should you consider using SolidJS for your next Internet Computer project? Here are a few compelling reasons:

Performance: SolidJS’s unique compilation strategy leads to incredibly fast rendering times and efficient updates. It is designed to be as performant as possible, making it a great choice for high-demand applications.

Simplicity: Despite its powerful performance optimizations, SolidJS maintains a simple and intuitive API. It allows you to build complex user interfaces without the steep learning curve associated with other libraries or frameworks.

Reactivity: SolidJS’s fine-grained reactivity system ensures that only needed components are updated which minimises wasteful renders. This model is both efficient and easy to reason about, simplifying state management.

Compatibility: It offers a modern JSX syntax and supports TypeScript out of the box, making it easy to integrate into your development workflow. Its ecosystem is growing rapidly, offering various libraries and tools that enhance its capabilities.

Community and Support: Though newer than some of its competitors, SolidJS has a vibrant and supportive community. Its documentation is thorough and accessible, and its growing ecosystem means more resources and plugins become available regularly.

Highlight img
In Summary

SolidJS offers an appealing combination of performance, simplicity, and modern features. It is particularly well-suited for developers looking to build fast, dynamic web applications without compromising on maintainability or developer experience. Whether you are working on a complex single-page application or looking to optimise the performance of your site, SolidJS is definitely worth considering.

Now you know a little bit more about the Internet Computer, Happy Coding! 🚀

Don’t forget to register to our newsletter and we will keep you updated about the course development progress.