JS Blocks – open source Angular components for progressive web applications

We already mentioned JS Blocks in one of our earlier posts on Ignite UI and Angular. This post is intended to introduce Ignite UI JS Blocks in much more detail. JS Blocks is a brand new member of the Ignite UI family. We started JS Blocks at the beginning of the year and codenamed it “Zero Blocks”. JS Blocks is built from scratch on top of Angular and is entirely open source, since the beginning of the project. Angular was still in a beta state when we started with JS Blocks and thus we knew there will be lots of tweaking and adjusting to new betas and RCs, and thus we did not rush to talk about it prematurely. We didn’t know whether Angular would be released before our 16.2 release and thus we weren’t even planning to make announcements with the release of the rest of our products, but since Angular released on September 15, which was surprising to us and to mostly anyone in the dev community, we had to adjust JS Blocks to the release version of Angular and make it available to developers. Enough history, let’s jump into what Ignite UI JS Blocks offers to developers!

Ignite UI JS Blocks is a nice addition on top of the Angular framework, which provides developers with a mobile-first component and directive set for rapid development of progressive web applications. JS Blocks is very light and offers a component and directive set which enables developers to very quickly put together modern looking applications for their users. We’ve developed a warehouse managements application to show you how easy it is to work with Ignite UI JS Blocks and Angular.

This application is available on GitHub. You can view it live here, and you can also clone the application repo to play around with the code. We are also working on a more lifestyle oriented application so make sure you follow our repo and stay tuned because there are more great samples and awesome blocks to come.

Ignite UI JS Blocks currently provides the following set of components and directives but we are working hard on its expansion with items like a scroll and a progress bar:

JS Blocks also comes with beautiful material design theming which you can use to make your application look slick and modern. JS Blocks will also soon include a rich icon set. Up-to-date information on what’s available and what’s coming for Ignite UI JS Blocks can be found in the repository’s readme.

Just like Angular, JS Blocks is built with TypeScript and distributed via NPM. We’ve put together a page where developers can see live demos of all components and directives JS Blocks provides, together with code snippets: http://igniteui.github.io/igniteui-js-blocks/

Now it’s time for coding, so enough talk. Clone Ignite UI JS Blocks, or directly npm install igniteui-js-blocks --save-dev in your repository! Happy coding!