Angular Code Generation - a Step-by-Step Guide using Indigo.Design

Jason Beres [Infragistics] / Monday, February 1, 2021

In this article, we will explore one of the hotter topics today – Code Generation. Code generation at its core is usually about source code compilers. However, there are many facets, and goals of code generation. We will answer these questions: 

  1. What is code generation?
  2. What is Angular code generation? 
  3. What is a Code Generation platform? 
  4. What are the benefits of using a code generation platform? 
  5. How can I go from design to code / Sketch to Angular? 

Let’s get started! 

What is Code Generation? 

Typically, code generation is described as a process by which an intermediate model of source code is compiled into a format that can be natively executed by a microprocessor running an operating system like Windows or Mac OS or LinuxThe process of “compiling” your source code is essentially taking it from one format (maybe C# or TypeScript) and making it another format (like Intermediate Language as a DLL or EXE, or JavaScript). Since processors require specific inputs and work in specific ways based on the type of hardware they are running on, there is always the challenge for compiler-makers to ensure that whatever the native execution piece is expected will run correctly on the target system. 

If you are using an older version of the .NET Framework from Microsoft, you would be compiling your source code into an intermediate language (IL or MSIL for Microsoft Intermediate Language), which is then “Just-in-Time” (JIT) compiled by a runtime interpreter – the Common Language Runtime (CLR) - which executes the code in machine language on the Windows operating system in real time. With new versions of the .NET Framework, like .NET Core and .NET 5, Microsoft ships intermediate language compilers and runtimes that work on other operating systems, like Linux or MacOS.  

The source code you write is the same, it is the responsibility of the compilers to ensure that their code-generation process is producing the correct intermediate language and that the runtime on the target machine can execute it. 

This figure visually demonstrates the process. 

 C# Just in Time Compile Process - Common Language Runtime Diagram

JIT Compilation vs. Ahead-of-Time Compilation 

For frameworks like Angular, or Xamarin, the concept of AoT, or Ahead-of-Time compilation is important. This means that your application the code generated from the compilation process is built for the native execution on whatever target machine or device it will run on. For example, if you AoT compile your Xamarin.iOS application, the code generated compiled code is native to iOS. There is no need for a runtime on the device to execute your application other than the native iOS OSIn early versions of Xamarin, apps were not AoT compiled. This meant that the mono runtime needed to be deployed to the device to execute the code at runtime. AoT compiled apps have better startup performance, and based on the device specs, potentially faster runtime execution. 

What is Angular Code Generation 

For the purposes of this article, Angular code generation is straightforward. Angular code generation is the process of using specific tooling that creates metadata (or an intermediate language) to get usable code output like source code for one or more Angular components and / or an entire Angular application. This output would be in a clean, usable format that can then be used by a developer for further modification and then ultimately compiled into a generated format that will run in the browser like JavaScript and HTML.  

There are several ways to accomplish this: 

  1. Using a the Angular CLI (Command Line Interface), with templates using Angular Schematics that will generate all or a part of an application. The Angular CLI from the Google team is the fastest way to generate the structure and dependencies of an Angular application. A schematic is a template-based code generator which includes instructions and logic to add or modify code from a code generation process. 
  2. Using the Ignite UI CLI from Infragistics, which goes a step further than the Angular CLI.  While still based on templates using Angular Schematics, the Ignite UI CLI can add user interface components like Charts, Angular Data Grids, and even entire application scenarios to a new or existing Angular application. You can even create your own custom templates based on your team or business need to accelerate app development and generate code in seconds. 
  3. Using the Indigo.Design Sketch to Angular Plugin, a developer can take a Sketch design file that is stored in the Indigo.Design cloud and code generate an Angular app directly inside Visual Studio Code. The best part is the developer still has complete control over the source code that is generated from the Sketch file, there is no limit on the app logic, modifications, and code changes. A tool like this is especially useful as is code generates all the CSS, HTML and TypeScript needed for the Angular app to run. 
  4. Using the Indigo.Design App Builder, a developer can use a web-based WYSIWYG tool to design and code generate an entire Angular application. The Indigo.Design app builder introduces the concept that teams can design and build real apps blazing in a cloud-based WYSIWYG drag & drop. This includes code, layout, CSS and even data. 

This diagram shows the level of interaction and code output you can expect from these code generation options. 

 Code Generation How To - Scale from Simple to Visual

 

You can see there are multiple options for Angular code generation – from the more generic Angular CLI to a robust drag and drop experience on the web using the Indigo.Design App Builder. You can use any of these options to accelerate app development and delivery in Angular. 

What is a Code Generation Platform? 

Delivering applications is more than just the process of compiling source code and generating some sort of output that will run on a target native processor. There is a process to deliver beautiful experiences to customers that make sense for the problems they are trying to solve. A key part of this process is Design. In a Design Process, a design team will work with stakeholders or customers to understand their needs, and then create a prototype the app in the tool of their choice (like Sketch or Adobe XD) for that stakeholder to try and use. The process is iterative, it includes getting feedback from stakeholders, updating the design based on feedback and critiques, and then testing again with stakeholders. This iterative process is proven to be the cornerstone of successful software projects. This iterative design process happens before any code is written … eventually there is a “handoff” from a design team to a development team of the customer approved design. At this point, the dev teams will use their own tools, attempt to decipher the design they were handed, and they will start writing code. 

It is in this handoff that risks a disconnect from the design intent and what gets built. 

If a product team (which includes design teams and dev teamsis standardized on a code generation platform, or as Gartner has coined, a Digital Product Design Platformrisk and errors in the handoff are greatly reduced or eliminated. A code generation platform should include more than just the “code” piece, it needs to include all aspects of delivering software, like: 

  • Screen Design 
  • User Flows 
  • Prototyping 
  • Co-Editing 
  • UI Components 
  • Code Generation 

This means that a design team and a development team should be evaluating code generation platforms, with an emphasis on what the platform can do before the code generation piece. Indigo.Design is the world’s only Digital Product Design Platform with a complete Design to Code solution – going beyond the traditional code generation platform goals. 

Benefits of Using Code Generation Platform for your Project 

The pros and cons of code generation and code generation platforms has long been debated. The argument for code generation benefits has always been productivity and speed to delivery. Of a tool can help me get this work effort done faster, than why wouldn’t I use it? The con against code generation is the “black-box” argument – a developer has no idea what code is actually getting “generated”, they cannot see it, change it, modify it, etc. So, the burden is on the developer if something goes wrong in code generated product. This fear of loss of control is usually what pushes development teams away from code generation. But, with today’s more sophisticated tools. Much of that argument goes away.  

Any code generation platform or tool that wants any level of success today must: 

  • Be transparent and open in how it generates code 
  • Product correct, consistent, and clean code 
  • Not hide anything from the developer 

This means – the code generation output should be something the developer inspecting it would build himself. Maybe even better, and certainly much, much faster. Which goes to the heart of why a team would adopt a digital product design platform that included code generation: 

  • Product high quality app output that are purposefully designed 
  • Increase team communication, efficiency, and output 
  • Significantly reduce time to market with higher adoption rates 

With today’s modern tooling, it is an obvious choice for teams to at least consider and experiment with digital product design platforms – if even for the benefit of modern code generation. 

Step by Step: Angular Code Generation from Sketch Design 

In today's fast-paced, agile development environment, getting from an approved UX design to usable, runnable code needs to happen faster than ever before. Developers are given the near impossible task of turning a UX design into a running app in days, and in some cases hours! Designers are being asked to get user feedback during an iterative design process with traditional tooling that does not match the needs of an agile UX process. This is where tools like Indigo.Design Enterprise can help. 

Using the Indigo.Design Visual Studio Code Generation Plugin, developers can generate high-quality HTML, CSS, and Angular code from a Sketch design with no compromise.  

Let's explore 2 options that you have to get pixel-perfect, editable code using Indigo.Design.

  1. Visual Studio Code Plugin
  2. Indigo.Design App Builder Sketch Importer

Option #1 - Sketch to Code using Visual Studio Code Plugin

Step 1: Install Indigo.Design UI Kit 

It all starts with a sketch. Use the UI controls and composite UI patterns in our UI kits to design apps in Sketch. You can download the Sketch UI kits from the Indigo.Design home screen.  

Step 2: Upload or Sync Sketch Design with Indigo.Design cloud 

Once a designer has completed their Sketch design, they upload it to the Indigo.Design website using the integrated Indigo.Design Sync Sketch Plugin. Once in the cloud, a design team can take advantage of the features of the Indigo.Design digital product design platform, like user testing, collaboration with users, and creating interactive prototypes 

Step 3: Generate Angular Code in Visual Studio Code 

A developer can install the Angular Code Generation plugin from the Indigo.Design home screen or from the Visual Studio Marketplace. Once installed, the designer shares a URL with the developer, that is used to locate the design when the developer launches the code generation plugin. From the plugin dialog, the developer can select any component, screen, or screens from the Sketch design. The dialog looks like this – a pixel-perfect view of the Sketch design from the cloud! 

  Code Generation Angular Visual Studio Code

Once things have been configured the way you like it is time to generate some code! Click on the "Generate Code Assets" button and this will begin the process. 

Here is how the extension will update your project: 

  • Install required NPM packages such as Ignite UI for Angular. 
  • Create components from selected sketch components. 
  • These will have the generated code. 
  • Create modules around these components.
  • Create basic routes in the modules for each component for navigation.
  • Updates project to use default theme for Ignite UI for Angular. 

In those 3 simple steps, you can go from design to code, from Sketch to Angular. If you don’t have a design or don’t have Sketch, try the People App sample here: 

https://www.infragistics.com/resources/sample-applications/angular-people-app 

Option #2 - Indigo.Design App Builder Sketch Importer

If you thought option #1 was simple - you'll love option #2! Here are the 4 simple steps to get from Design to Code with the App Builder in Indigo.Design with drag & drop.

Step 1: Click New App from the Indigo.Design Apps Home Screen

Create New Angular App from Sketch Design

Step 2: Drag your Sketch file into the "Create from existing design" Drop Area

Sketch to Angular Drag and Drop

Step 3: Review the Design in the Cloud IDE

People App in Web App Builder from Sketch

Step 4: Review or Download your Angular code

You can choose to use the buttons in the upper right of the IDE to Generate App or Preview your app and see code. Here you can see the Preview option with your running app and your code of HTML, CSS or TypeScript.

Angular Live Code Preview Sketch File

Just like that, a design or a developer can go from sketch to code with a web-based WYSIWYG tool. Teams can design and build real apps blazing in a cloud-based WYSIWYG drag & drop and get code - complete with web layout, CSS and even data.

Indigo.Design

Summary 

Code generation is more than just compiling source code to a native machine language. Code generation has many facets, and many tools to do the job. This article gave you a background on what code generation is, why you need it, how you can apply it to an Angular app, and you were introduced to some tools that can help you build better software faster. 

Happy Coding!