Lets #HackTogether: Javascript On Azure Keynote

Nitya Narasimhan, Ph.D - Aug 21 '23 - - Dev Community

👇🏽👇🏽Click below to join the next deep-dive session: Aug 21👇🏽👇🏽
Banner advertising the upcoming Microsoft Reactor session on August 21

Join the #HackTogether learning journey in 3 steps:

  • 1️⃣ | Watch the keynote, learn to build enterprise-grade apps.
  • 2️⃣ | Register for the hack, skill up on tools & technologies.
  • 3️⃣ | Fork 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 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 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. 😈

That's right. Going on right now is a 2-week JavaScript on Azure hackathon where you have:

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!

Want to follow along? Browse the keynote slides below:

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:


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

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 the keynote, learn to build enterprise-grade apps.
  • 2️⃣ | Register for the hack, skill up on tools & technologies.
  • 3️⃣ | Fork 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 for a closer look at each tile.

A colorful sketchnote describing the developer journey

Happy Hacking! 👩🏽‍💻🏆⭐️

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Terabox Video Player