Rapid Application Development with Code Generation

3 hours, 48 minutes CC
Rapid Application Development with Code Generation

Course Description

What would it mean for you in your career if you could develop applications faster than you have been? Re-imagine the traditional software development process and approach while building a fully capable code generation engine using basic string manipulation. You’ll learn practical techniques and examples of accelerated development using CLIs, live templates, helpful libraries, and tooling.

This course and others like it are available as part of our Frontend Masters video subscription.

Preview
Close

Course Details

Published: February 2, 2022

Learn Straight from the Experts Who Shape the Modern Web

Your Path to Senior Developer and Beyond
  • 200+ In-depth courses
  • 18 Learning Paths
  • Industry Leading Experts
  • Live Interactive Workshops
Get Unlimited Access Now

Table of Contents

Introduction

Section Duration: 6 minutes
  • Introduction
    Lukas Ruebbelke introduces the course by providing an overview of the material to be covered and the course's end goal. A demonstration of a possible end project for this course is also covered in this segment.

Primer

Section Duration: 22 minutes
  • String Manipulation
    Lukas discusses the various functions used for string manipulation, including Array.split, Array.join, Array.map, and Array.reduce. A code example walkthrough of using .split and .join to manipulate strings is also provided in this segment.
  • Dynamically Invoking Methods
    Lukas live codes dynamically invoking methods, including a single invocation, sequenced invocation, mapped invocation, and reduced invocation. The techniques used in this segment will be used as a foundation for the tools created in this course.

Mindset

Section Duration: 31 minutes
  • Nouns, Verbs, Conditionals, & Iterators
    Lukas discusses having the goal of gaining a deeper understanding of what is already understood. The concept of mastery of a subject being boiled down to the deep knowledge of its essential parts is introduced in this segment.
  • Rapid Prototyping Mindset
    Lukas discusses limiting beliefs around rapid prototyping, the barrier between interactive mocks and high-fidelity prototypes, and the relationship between skill and effort. The concept of prototypes being disposable because they are immutable and not because they are inferior is introduced in this segment.
  • Prototyping Q&A
    Lukas answers student questions regarding if call and apply will be covered, how to lead a conversation regarding throwing away versus productizing a prototype, and what metrics can be used to validate trying a new idea.

Architecture

Section Duration: 22 minutes
  • Code Generation Overview
    Lukas discusses managing code complexity, vertical development, horizontal development, and emerging patterns. When clear functional cohesion is achieved from cleanly abstracted layers, natural patterns of convention will emerge.
  • Architecture Overview
    Lukas discusses architecture patterns used to condense and simplify codebases and different code layers being conventional or complex. Examples of reduced segments of code, including actions, selectors, reducers, wiring, HTTP services, and containers, are also provided in this segment.

Tactics

Section Duration: 2 hours, 11 minutes
  • Domain Models
    Lukas discusses making inferences from domain models and utilizing code generators to build forms quickly. A student's question regarding dynamically generating props is also discussed in this segment.
  • Code Snippets Demo
    Lukas demonstrates generating a props schema with dynamic variables to assist with quickly building forms while avoiding copy and pasting code.
  • Utility Functions
    Lukas discusses the challenge of model name variations, experimenting with building a pre-existing library for better understanding, and walks through examples of using and combining simple utility functions for manipulating text.
  • Model Name Variations
    Lukas walks through building out a name variation generator, including base variations, plural versions, and adding parameters. This domains model variations object can be used to quickly and efficiently hydrate templates.
  • CLI
    Lukas demonstrates utilizing CLIs to quickly generate the entire structure of an application, including placeholder components and redux slices for defined entities. A student's question regarding how to adapt this approach to changes within the domain model is also covered in this segment.
  • Generators
    Lukas walks through generating templates and updating an Axios template to generate the appropriate domain model. A brief walkthrough of utilizing a reducer template generator is also provided in this segment.
  • Generating Layers
    Lukas discusses the differences between generating a single template output and generating all of the templates. A demonstration of defining schemas, inserting them into an array, looping over the array, and reducing them to an output is also provided in this segment.
  • Generating Stacks
    Lukas walks through how to generate an entire stack by defining a collection of layers, iterating over the collection, capturing each layer, and reducing them into a single piece of code.
  • RAD Q&A
    Lukas answers student questions regarding what to do with the generated molds when building the application and if tests should be generated alongside the generated code. This segment also covers how a project would develop from the design of the domain models to deployment.
  • Generating Reducers
    Lukas demonstrates generating reducers to assist with event storming and further discusses how a project develops from models to deployment. Mapping out an event flow to help understand how a user can interact with a system.
  • Deployment
    Lukas walks through implementing the functionality to copy the generated code to the clipboard using the npm package clipboard.js. A brief discussion regarding implementing the functionality to download and package a project into a zip file is also provided in this segment.
  • Mock API Generation
    Lukas demonstrates mock API generation functionality using faker.js to generate fake data and moment.js to generate dates.

Wrapping Up

Section Duration: 14 minutes
  • Wrapping Up
    Lukas wraps up the course by providing personal links, closing thoughts regarding this course, and discussing how to create a mock API synced with actual code. Student questions regarding how easy it is to maintain templates, how to decide to work on the generator instead of building the code directly, tips for handling non trivial data types, and using premade tools for mock data are also covered in this segment.
"Expertise is the ability to convert insights, insights from pattern matching from repeated scenarios, into valuable outcomes." - by Lukas Ruebbelke on Frontend Masters!
Mekael Turner

Mekael Turner

mekaelturner

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now