Online Visual Prototyping of Angular Apps With JitBlox

Maurice de Laat
Nov 23, 2020 · 6 min read

by Maurice de Laat

Image for post
Image for post

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?

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…

  • 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

Image for post
Image for post

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) 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

Styling your prototype

  • 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:

Image for post
Image for post

Stongly-typed models

Stub your API’s

Image for post
Image for post

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

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

What’s next?

I’m looking forward to seeing what you create. JitBlox is free for public projects 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.

Originally published at https://www.jitblox.com on November 23, 2020.

The Startup

Medium's largest active publication, followed by +756K people. Follow to join our community.

Maurice de Laat

Written by

Freelance software designer | Creator of JitBlox online prototyping environment and Yellicode, an open source code generation platform based on TypeScript/Node.

The Startup

Medium's largest active publication, followed by +756K people. Follow to join our community.

Maurice de Laat

Written by

Freelance software designer | Creator of JitBlox online prototyping environment and Yellicode, an open source code generation platform based on TypeScript/Node.

The Startup

Medium's largest active publication, followed by +756K people. Follow to join our community.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store