I’ve created yet another JavaScript framework

It’s 2024 and you’ve created yet another JavaScript framework. Seriously man!

When talking about another Javascript framework, you may laugh and think that there are tons of proven options out there why bother creating another one? 🤷‍♂️

Let me share with you my personal story which leads to the development of a new Javascript framework. But if you don’t care about my pathetic story, here is the TLDR:

TiniJS is a meta framework powered by the Web Components technology based on the Google Lit library.

You can start by downloading the starter template or initialize an app using the CLI, run npx @tinijs/cli@latest new my-app and follow the instruction.

For more detail, please see the Get started section below or visit https://tinijs.dev/.

The story

Joke aside, I’m not an expert in Javascript, but for a little bit about my background so you may know my anoyance story regarding front-end web development. I used to be an Angular developer back in the version 1 of it and currently working mainly with Vue and accasionally jQuery. I had these 3 PITA (Pain In The *beep*) experience which motivated me to experiment with the TiniJS framework.

PITA #1 – BUILDING A GOOD UI/UX IS HARD, IT IS TEDIOUS AND TIME CONSUMING!

Back in around 2010, there are two distint kinds of websites: the one with a ton of texts, links, barely some images here and there; and the others are with overwhelmed graphical elements such as GIF images, Flash background, rainbown cursors, …

People tend to have the stereo type that back-end is hard and front-end is easy. It’s kinda true, but not entirely, I mean, who am I to blame, right? Because with a little bit knowledge of HTML and CSS, you can pretty much build a static website very easily. But, in order to build a good UI/UX, there is much more to be considered. You have to be a master of many more things, and they are not easy at all!

PITA #2 – CSS FRAMEWORKS ARE LACK OF FUNCTIONALITIES AND CUSTOMIZING THEM IS NOT VERY EFFICIENT!

People realized the difficulty of front-end development and started to build CSS frameworks to help with the problem. Bootstrap is one of the pioneers of this trend, other popular ones are: Foundation, Semantic UI, Bulma, Skeleton, Pure CSS, … Those CSS frameworks are great, no doubt about that, they help us to build a good UI/UX faster, but they also have their own limitations.

First, despite the fact that all the frameworks provide certain ways to customize the style, but overall, I feel that it is not very easy and reusable to me.

Second, is the lack of functionalities. I mean, they are mainly CSS, they provide some functions, usually as plugins to JQuery. Most of the cases you have to write your own Javascript to make a feature works.

PITA #3 – JAVASCRIPT FRAMEWORKS ARE OVERWHELMING AND SOMEWHAT REDUNDANT!

Enter the modern era of web development, Javascript frameworks are the new trend. But the problem is that we have so many choices, it is both a blessing and a curse. They provide great functions but not very interoperable, you can’t just take a piece of code from one framework and use it in another. Especially, creating a UI system with separated packages for specific frameworks is a very daunting task.

Every time I start a project or do some kind of front-end work, the fragmentation of front-end web is somewhat painful to me. That seems to be the way of life, there is no avoid, isn’t it? Please don’t get me wrong, I’m not against any framework, I tend to choose solutions and not technologies, so if it works for you, just go with it. But I wonder to myself is there any way to somehow unify or lessen the gap in front-end development experience? 🤔

INTRODUCING THE TINIJS FRAMEWORK!

That is the reason why I experiment with the TiniJS framework for a while. It is a collection of tools for developing web/desktop/mobile apps using the native Web Component technology, based on the Lit library. Thank you the Lit team for creating a great tool assists us working with standard Web Component easier.

It is aimed to be as much standard, small and versatile as possible. Not really comparable to other frameworks and meta-frameworks, but overall it has similar capabilities and also in the other hand, key differences. It is both a replacement choice and a complement to other frameworks. You may use TiniJS to build a various type of apps: landing pages, SPAs, PWAs, desktop apps, mobile apps, … Feature-wise, anything works in Javascript should work fine in a TiniJS app.

OK, enough talking, show me some actions! 👌

Get started

Tini (or “Tí nị” in Vietnamese – meaning something very small in an adorable way).

To quickly create a TiniJS project, you can use the CLI to initialize a template.

npx @tinijs/cli@latest new my-app

The above command create an app by downloading the Bare template. In the future, I would like to provide several starter templates. You can also create your own templates and share them with the community or for your own private use. Currently, these templates available:

• Bare (default) – minimum structure of a TiniJS app.
• Blank (flag -t blank) – includes router, state management, meta tags management and the Bootstrap theme family.

Now, inside the project you can run npm run dev to start the development server. You may start development by edit the file ./app/app.ts which is the root component of the app. For how to work with custom elements using Lit please visit Lit component, there are some differents between LitElement and TiniComponent, but for now you can modify static styles and render() as you would normally do.

To build the distribution, run npm run build and optionally run npm run preview to preview the production build. You can now deploy the .output folder to any static host.

You may want to check these examples to see more detail how a TiniJS app works.

That’s is a basic introduction to the TiniJS framework. Next time we will explore about The structure of a TiniJS app and work with Components.

For more please visit: https://tinijs.dev

Thank you and happy coding! 💖