Online visual prototyping of Angular apps with JitBlox

Please note that this blog post was written in 2020. For an overview of the latest features, we recommend visiting our home page.

After a year of hard work, I'm very excited to introduce JitBlox. You can check it out now over at https://www.jitblox.com, it's free.

JitBlox is the first visual prototyping tool and code generator for single-page applications. JitBlox lets you create a working model-driven application without coding and without even leaving your browser, giving your next web project a jump-start.

Why JitBlox?

Nowadays, developing modern web applications requires developers to implement rich interactions, integrate web API's and compose their applications out of multiple, reusable components that work together. Luckily, as web developers, we have an ever-growing choice of web application frameworks that take away some of the complexities that are involved in building what we typically call a single-page application (SPA).

Still, as a web developer you may recognize that getting a new modern web project off the ground requires a lot of configuration and tweaking. Most frameworks come with a CLI (command-line-interface) to scaffold a new project, but after that, you're on your own with your favorite code editor.

You might also recognize that, in particular at the start of a project, accommodating redesigns and changing requirements requires updating the same code more than once, increasing the risk of errors and technical debt.

This is why we built JitBlox, an integrated environment that takes away a lot of the burden of building a first working version of your application. JitBlox offers:

• An online environment: kick-start a new app without leaving your browser;
• A visual designer: an easy-to-use UI for building components, templates and complex data types;
• A live preview: see how your application develops in real-time, on any device;
• A downloadable application that just works, right out of the box;
• Clean source code that is well organized and follows recommended practices;
• Mock data editing: test your UI with realistic data;

JitBlox generates Angular (currently Angular 11) applications and comes with components from the popular Angular Material library. Targeting other frameworks is planned for the future.

Components, components...

Because components are the basic building blocks of a single-page application, JitBlox lets you organize your application into reusable, custom components. If you have some experience building single-page applications, you may recognize the following coding activities as you develop your app's components (in any order):

• Create a component class with an HTML template;
• Style HTML elements with CSS;
• Create application-specific data types;
• Bind HTML elements to data and add surrounding logic;
• Write code to fetch the data from a (maybe yet-to-be-implemented) backend;

JitBlox supports all these activities and knows how your app's data model, its data and components relate so that you won't need to worry about renaming, moving or refactoring any of them, keeping your application clean, consistent and bug free.

Building HTML templates

The template editor focuses on composing HTML structure, data-binding and structural logic. It provides the tools and property editors that make setting layouts (grid, flexbox) and creating data-bindings a breeze. In addition, you will find built-in components that make structural (if- and repeat) logic and routing easier than ever.

We made a deliberate choice to not create a WYSIWYG editor, but an editor that visualizes elements as boxes (like the ones that you would draw on a whiteboard) as a tree (june '21 update!) with nodes that can be easily moved around and edited. Why? Aside from the technical challenges around building a WYSIWYG editor for a dynamic, data-driven application, this would also be difficult when designing components outside their context. Which brings me to the most important feature of JitBlox: the Live Preview.

Live preview

The best representation of your UI, data and state is your actual running app. This is why we created a Live Preview function that shows an always up-to-date version of your application. The preview opens in a separate browser window, can be opened in a different browser and even on another device (!). For now, the preview will be gone as soon as you leave the JitBlox designer, but an always-available preview that you can share with others is planned for the near future.

Styling your prototype

JitBlox encourages you to write as little CSS as possible. Even though the designer provides a style editor for your basic CSS needs, there is a wide choice of battle-tested component frameworks and CSS libraries, from which we've integrated two to start with:

• Angular Material. An implementation of Google's Material Design Specification for Angular, containing well-tested and accessible UI components.
• Tachyons. Tachyons is an easy to learn CSS design system, through the use of Single Utility Classes (classes that do one thing), making them a perfect choice for prototyping applications.

In addition to that, JitBlox has built-in support for Flexbox and CSS Grid layouts, the latter using an awesome grid editor:

Strongly-typed models

JitBlox's modeling capabilities provide a simple but effective way to create your own data model. Whenever you have some complex data to display, you can define a type for it so that it becomes available throughout your project. Also, defining types allows JitBlox to generate strongly-typed TypeScript code for you, preventing mistakes when developers need to work with the generated source code in the future.

Stub your API's

The best way to test your application and ensure that all data bindings work, is using actual data. In a typical single-page application, this data would be fetched from a remote web API. However, this API may still be under construction or not be available at all. Therefore JitBlox allows you to simulate these using API Stubs and Mock data.

JitBlox generates an Angular service for each API stub, including service invocations from components that depend on them (yes, you get observables and async pipes out of the box).

Downloading your app

Your application's source code can be downloaded at any time and just works. All you need to do is run npm install and npm start. All TypeScript code is strictly typed and follows recommended practices: the Angular project download is based on a standard Angular CLI project and automatically takes care of stuff like:

• Including the appropriate modules in your application's AppModule;
• Route tables;
• Safe navigation operators;
• Observables and async pipes;

What's next?

I have no doubt that JitBlox can save you many days of programming work, in particular in a world with ever-changing requirements in which development resources are scarce and careful planning is more important than ever. We have lots of awesome features planned for the future (target other frameworks such as Vue.js, support Bootstrap 5 components, always-available previews, easier project-sharing and more).

I'm looking forward to seeing what you create. JitBlox is free and no sign up is required to try it out. If you create cool things that you want to share, just drop us a message to be listed on the examples page. If you need help, check out the docs or the help page for the right directions.