Type-Safe APIs - Syncing Back & Front End Types w/ Code Generation

ℹ️About

For data-heavy applications, a Single Page App can be an absolute joy for users. No more waiting for pages to load, or full refreshes when a form submits, or out-of-sync data when a page hasn't yet reloaded. SPA frameworks like Vue also allow for some really great separation of concerns between front & back end developers: back end can provide and work on a set of APIs, and Vue devs can focus on hitting those APIs, then handling & displaying data accordingly. This same thing that makes SPAs great for large apps, however, also makes them really frustrating in one particular way: consistency between models & definitions, between back & front end code.

If back end adds an "addressLine1" property to the "Customer" object, how does the front end know about it? If back end renames one of their API endpoints, how can they be confident that Vue will be updated accordingly? And even when we remember to make these types of changes, how can we decrease the frustration of duplicating all these code changes across 2 codebases, usually in different languages? Now that our SPA client is totally separate from our back end code, this seems like a tricky problem to address.

The answer: code generation tools, to take API definitions & output usable TypeScript. We'll discuss how we can go from the most frustrating part of any SPA development workflow, to what can become the most satisfying. We'll focus primarily on Open API & Swagger, 2 potential API definition standards, while referencing tools for other cases (even a bit of GraphQL). We'll talk about making use of generated interfaces to reduce code duplication & increase type safety across our apps. We'll look at code organization patterns in Vue specifically, to minimize the hassle of referencing generated TypeScript files in the first place. And we'll talk briefly about CI & NPM versioning patterns we use @ POLITICO to automate this process in quite useful ways.

🗣️Speakers/Facilitators

Jack Koppa, Front-End Developer @ POLITICO

📆Schedule

6:30PM - 7:00PM: Food and Drinks
7:00PM - 8:30PM: Talk
8:30PM - 9:00PM: Q&A + Wrap-up

⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️
Please sign up with a your full name and bring a valid photo ID to get through security. Please make sure your account has both your first and last name when RSVPing before the date or you will not be able to get into the building.
⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️

🚋Transportation

Metro: Bloomberg BNA is located across the Crystal City metro. The main entrance of our building is located in the courtyard off of South Bell Street. You will be greeted by security.

Parking: If you plan to drive, there is paid parking available in the garage below our building. Pull into either parking entrance and chose any space that is not designated reserved. Take the stairs marked 1801 and exit at street level. Walk around to get to 1801 main entrance.

❓FAQs

What level of experience do I need to come?

Some Vue experience would be helpful, but even if you are new to Vue, come anyways and people will be glad to help!

Do I need to bring my laptop?

Nope. No exercises this time, but you might want to bring something to take notes on so you can remember to check things out later on!

Other Questions

If you have any other questions, please reach out to us and we'll be happy to help with whatever we can!