Lets #HackTogether: Javascript On Azure Keynote
Tags: contosorealestate, javascript, azure, hacktogether
Published: 2023-08-21 00:17:45

---
title: Lets #HackTogether: Javascript On Azure Keynote
published: true
description: Join @anfibiacreativa @nitya and @juliamuiruri4 for the #JSOnAzure Hack Together opening keynote focused on the Contoso Real Estate reference sample. Learn More: https://aka.ms/contoso-real-estate/hacktogether
tags: contosorealestate, javascript, azure, hacktogether
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g0bajc0ytn5x36npciwt.png
series: Contoso Real Estate (Deconstruct/Ed)
---
👇🏽👇🏽**Click below to join the next deep-dive session: Aug 21**👇🏽👇🏽
[![Banner advertising the upcoming Microsoft Reactor session on August 21](https://learn.microsoft.com/en-us/training/media/student-hub/Frontend_HT.png)](https://developer.microsoft.com/en-us/reactor/events/20276/)

Join the #HackTogether learning journey in 3 steps:
 - 1️⃣ | [**Watch**](https://youtube.com/watch?v=908DhvF6HZk) the keynote, learn to build enterprise-grade apps.
 - 2️⃣ | [**Register**](https://aka.ms/contoso-real-estate/hacktogether) for the hack, skill up on tools & technologies.
 - 3️⃣ | [**Fork**](https://aka.ms/contoso-real-estate/hacktogether) the repo, make an OSS contribution!

---

## Building Enterprise-Grade Apps is Hard 🤦🏽‍♀️

Are you new to modern web development? Or, perhaps you know the fundamentals and have built various personal projects - but now you need to deliver a real-world, enterprise-ready application. And you're asking yourself: _How do I even start planning and building something so complex?_.

**Real Talk.** We've all been there. Building real-world applications is complicated even for experienced developers. You're dealing with multiple scenarios, co-ordinating across multiple teams, and targeting diverse users with support for multiple device platforms. Plus, you need to have solutions that are reliable, scalable, secure, and cost-effective. 

**Lego Analogy.** One way to think about this is that it's like building with Legos. You know the different kinds of blocks and components and what they do. You've built a lot of Lego sets on your own. And then someone hands you the 7500+ piece _[Millenium Falcon Set](https://www.lego.com/product/millennium-falcon-75192)_ and asks you to build it - without the manual. 😱 You might feel a little lost.

**Paved Paths.** What you need is a _trail map_ - some kind of paved path that takes you from where you are (know concepts, build prototypes) to where you need to be (know architectures, build products). That path can take different forms:
 - **Build it up.** - This is the traditional approach where you get documentation (or a developer guide) that tells you how to build that application step-by-step, with detailed instructions.
 - **Tear it down.** - This is the hacker approach where you get a completed example (or an open source sample) that you can reverse engineer to figure out the steps on your own.

And remember that for every documented project you can build up, you can find hundreds more open-source projects you can tear down, to jumpstart your learning. And, you can use technologies like [GitHub Copilot](https://docs.github.com/en/copilot/github-copilot-chat/using-github-copilot-chat#asking-github-copilot-chat-questions-about-your-code) that can _explain unfamiliar code to you_ - so learning solo feels more like pair-programming with a friend.

---

## HackTogether 👉🏽 Contoso Real-Estate

To try that _tear it down_ approach, all you need is an open-source sample for a real-world application, and a community of like-minded learners and subject matter experts, to help and motivate you. If only you could find something like that ... 🤔

Oh, wait. 😈 

{% link https://dev.to/azure/join-us-for-hack-together-javascript-on-azure-global-hack-from-aug-16-31-2023-oc7 %}

That's right. Going on **right now** is a 2-week JavaScript on Azure hackathon where you have:
 - 👉🏽 [**Azure-Samples/contoso-real-estate**](https://aka.ms/contoso-real-estate/github) - _open-source_ app
 - 👉🏽 [**#HackTogether Event Series**](https://aka.ms/contoso-real-estate/hacktogether) - _6 livestream sessions_
 - 👉🏽 [**Contoso❤️HackTogether Discussions**](https://youtube.com/watch?v=908DhvF6HZk) - _community_ forums.

**No More Excuses** - Just dive in today and start skilling yourself up to learn not just how to build enterprise-grade solutions but _how to tear down open source samples_ so you can do this for **any technology or use case** in the future. 

Get started by watching the HackTogether keynote below. Get an overview of the application and development process, then validate _your own development environment_ and set yourself up for success!

{% youtube 908DhvF6HZk %}

Want to follow along? Browse the keynote slides below:

{% speakerdeck e86fb95e4d0e41cdb16d616fa44f6faa %}

Read on for a **quick summary** of what the application does, how it is architected, and where you can go to find more information to help your deconstruction journey.

---

## Contoso Real Estate 👉🏽 User Experience

What is the Contoso Real Estate application behind this sample? It is an enterprise application developed for a _fictitious company_ (Contoso) with the purpose of supporting _new hires_ find temporary _home rentals_ during their onboarding phase. The application has three core experiences:
 - An _admin app_ for HR to manage rental listings data, blog
 - A _blog app_ for new hires to read blog articles
 - A _portal app_ for new hires to browse, save, and reserve, rentals.

Here's a sneak peek at what that application _user experience_ looks like:

{% youtube GxeENsvwZrI %}

---

## Contoso Real Estate 👉🏽 Dev Experience

Building this application involves multiple scenarios - which in turn will influence the developer experience in three ways:
 - **Prioritization** - in what order should scenarios be built, taking dependencies into account
 - **Architecture** - what architecture pattern should we use, given team & app requirements?
 - **Technologies** - what compute, storage & integration decisions should we make,for cost & scale?

Here's a high-level diagram answering those questions:

![An architecture diagram showing the core scenarios boxed up in stages](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mkvk8sdoiuz4njppy011.jpg)

We use a _Composable Enterprise_ architecture pattern that reflects the "Lego blocks" approach with API-first strategy that defines and standardizes _interaction interfaces_ between blocks. 

This allows us to build front-end and backend solutions as independent components (that can be owned and evolved by different teams) - and use end-to-end workflows (CI/CD pipelines) to _compose_ the application in production. It also makes it easier for us to _extend_ the application in future, to support new scenarios or replace existing components to benefit from modern technologies.

---

## Next Steps

Sound like an interesting project to help you build real-world skills and experience for enterprise-grade application development? Excellent! 🎉

Reminder that there are 3 actions you can take to get started today:
 - 1️⃣ | [**Watch**](https://youtube.com/watch?v=908DhvF6HZk) the keynote, learn to build enterprise-grade apps.
 - 2️⃣ | [**Register**](https://aka.ms/contoso-real-estate/hacktogether) for the hack, skill up on tools & technologies.
 - 3️⃣ | [**Fork**](https://aka.ms/contoso-real-estate/hacktogether) the repo, make an OSS contribution!

Bonus: Here's an illustrated guide explaining the motivation and process behind the Contoso Real Estate application.. [**Download the high-resolution version here**](https://github.com/SketchTheDocs/cloud-skills/blob/main/gallery/MSBuild-2023-ContosoRealEstate.png) for a closer look at each tile.

![A colorful sketchnote describing the developer journey](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/29sodv04dqgjfqo2ju0i.png)

Happy Hacking! 👩🏽‍💻🏆⭐️