Introducing Strudel.js

Javascript world is overflowing with frameworks. Developers often say that every time someone creates a Javascript framework God kills a kitten. Honestly, I was always more a dog person. Jokes aside, people saying such things don’t understand that frameworks are created to solve problems. If there are still unsolved problems in front-end world there is a space for a new framework. And there is still plenty of space.

What problem Strudel.js tries to solve then? Here’s the answer — making interactive websites in more maintainable and organised way. And I mean the websites — the ones that more about the content (as opposed to apps) like blogs, portfolios or portals. In this article I will share the big ideas behind Strudel.js coming into being.

Optimised for websites, not apps

Depending on your front-end experience you already used or just read about frameworks like Angular, React or Vue. They are great tools for dealing with complex user interfaces where the state of every button or input needs to be meticulously programmed. Strudel.js is not meant to compete with them. Web is not only built for apps, there is plenty of room for content-oriented websites. You may be fan of plugging Angular for making a single carousel on your website, but in my opinion it’s trying to crack a nut with a sledgehammer.

Strudel.js is not a competitor for Angular, React or Vue.

Let the aforementioned frameworks shine within apps area, but leave other areas for more suitable tools. I understand the desire to write front-end code in the coolest technologies. What about classical server-side rendered pages or the CMS that you are using, will these frameworks play nicely with them?

Strudel.js is a framework for bringing interactivity to your content pages by simply enhancing existing markup with the functionality. But it’s made with the cool technologies like component-based architecture, ECMAScript 2015 and decorators. You should check the introduction — writing in Strudel.js is as cool as in other frameworks but it’s most suited for that kind of job.

New, but familiar

I don’t need to ask if you are familiar with jQuery. I am certain you are, because it’s still the most popular Javascript library in the world. In the year when it was introduced front-end development was hell. Every browser had almost different DOM API and there were a list of hacks that you need to take into account when developing the simplest functionality.

Fortunately for us we live now in a better world. All major browsers have constant upgrades and the adoption rate of new APIs available for our user base never have been so quick. The question that polarises the front-end world now is — maybe it’s time to say farewell to jQuery? In my opinion the biggest advantage of jQuery is it’s well-known API. It’s just easier to use than to native DOM API — it’s super convenient.

Writing front-end code the same way we did 10 years ago is rather suboptimal.

The problem with jQuery is that it doesn’t fit in ECMAScript 2015 oriented world so well. We now have modules and plenty of other cool toys to write nicer code. Strudel.js is designed to play nicely with the latest standards, but what is also important it doesn’t say no to jQuery legacy. It extracts the best bits from jQuery — e.g. DOM Manipulation API— and serves it in a more modern way. As a result you got best of the two worlds — power of ECMAScript 2015 with familiar DOM manipulation syntax.

Lean and simple

If you are worried that you need to learn the next framework Strudel.js comes with a bunch of handy ways of getting you at up to speed in seconds.

First of all it has shallow learning curve so you just can fully discover the API by reading the guide and reference from the website. Is super easy to set up new Strudel.js project, as it offers a CLI that will kick start new project for you automatically. You no longer need to worry about correct dependencies and properly configuring the build system. If you never user a front-end framework, using Strudel.js shouldn’t scare you.

What is also important for performance freaks is how lean Strudel.js is. Production version is only 3kb (gzipped) so you don’t need to feel guilty that you want to include a framework on your website. There is basically no difference from Javascript bundle size perspective between using Strudel.js and not using it so there’s so why even bother.

What to expect next

I hope I’ve gained your interested and the reasons that brought Strudel.js to existence somehow resonate with you. If you would like to learn more please visit the website or Github page and start using the framework right now! Feel free also to leave comments and feedback below this article.

https://github.com/strudeljs/strudel

One important thing is — Strudel.js is in beta. The full API is still being defined, but it doesn’t mean there will be any breaking changes coming with version 1.0. Expect new powerful decorators, improved stability and much more needed utilities and tools for building maintainable component systems.

Stay tuned for the news about the development of the framework and follow it’s profile on Twitter!