General

Deploying Web Applications with DigitalOcean and Azure

Aug 23, 2021

6 min read

Building Modern Web Applications with DigitalOcean and Azure

It has never been easier to deploy web applications. With every passing year, there seems to always be some new service or platform with a mission to make it easier for developers to launch their applications into the cloud.

In the latest couple of episodes from Build IT Better: Platform, we dive into two of the major players in the realm of application deployment.

DigitalOcean

It's not just, "Hey, here's the hardware, do something. It's more like, let us help you build whatever it is you need to build. -- Chris Sev

If I were to summarize the value proposition of DigitalOcean, I'd call it "Simplicity, without Compromise". There are some incredibly big fish out there in the ocean of cloud computing, namely some whales like AWS, Azure, and Google Cloud Platform.

This being said, DigitalOcean has carved out its corner of the cloud computing market by expressing the value of simplicity. Instead of freezing small and medium-sized businesses with feature complexity (AWS and Azure have over 200+ services for example), DigitalOcean eases the developer in with beautiful guided documentation, and simple service offerings.

During this episode of Build IT Better with DigitalOcean Sr Developer Advocate, Chris Sevilleja, he mentioned 3 services that stood out for him across DigitalOcean's offerings.

The $5 Droplet

DigitalOcean's $5 droplet offering has a special place in my developer heart. Being such an affordable option, DigitalOcean's droplets were the very first place I've deployed a website to the greater internet. What's incredible to me, looking back on this fact years and years later, was just how much of a miracle this was for my junior self. With little to no knowledge, and JUST following their documentation, I was able to accomplish:

Nginx server blocks to host multiple websites
SSL Certificates with Certbot
Databases such as MySQL and MongoDB
and much more!

To learn how to configure and manage your own VPS, check out DigitalOcean's Initial Server Setup Guide, and also their guide on How to Setup a NodeJS Application for Production.

With the rise of ever-increasing options for easily deploying applications at scale (Netlify, Heroku), DigitalOcean needed a way to compete outside of simply easily provisioning VPS's.

App Platform

Entering General Availability on October 6th, 2020, DigitalOcean's App Platform was their answer to simplifying the Platform-as-a-Service space. With a few simple clicks, DigitalOcean will hook into a git repository, and automatically build and deploy the application on every commit.

App platform will even run containerized applications pulled in from DockerHub!

Along with deploying services right from their repositories or Docker images, App Platform abstracts away many other aspects of app operations.

SSL Certificates are automatically created, managed, and renewed
Application components can be created in a single click
- Static Sites
- Web Services
- Workers
- Databases
- Jobs
Easily scale application horizontally by adding more containers, or vertically by increasing container size
Built on top of Kubernetes, can be exported to Managed Kubernetes

Managed Kubernetes

One of the leading orchestration technologies is the open-source solution Kubernetes. To make it easier to deploy a Kubernetes orchestrated deployment, DigitalOcean has created their Managed Kubernetes solution so that developers can create Web Apps and also deploy, scale, and manage APIs and back-end services all with Kubernetes. Here are a few highlights of this feature:

Full Kubernetes API
Have a Kubernetes cluster in minutes and pay for only the DigitalOcean resources used
100% managed
Guided Configuration
Global availability

Azure

Azure is one of the big fish in the sea of cloud providers. With over 200+ services, a developer, given enough time to figure things out, can deploy anything on this platform. Just like DigitalOcean though, Azure needed a way to compete with the growing number of services becoming available allowing developers to more easily and affordably deploy solutions (Netlify, Heroku, Vercel, etc).

Azure Static Web Apps (SWA's)

During the episode featuring Azure Developer Engagement Lead, Sherry List, and Azure Cloud Developer Advocate, Chris Noring, we spoke about one of Azure's latest products, Azure Static Web Apps.

Entering general availability on May 12th, 2021, Azure Web Apps offer a similar experience to DigitalOcean's App Platform. The big value-add for Azure SWA's though is their tight integration with the Azure ecosystem of services, along with first-class integration with GitHub and Azure DevOps.

Link to documentation for creating Azure Static Web App here.

In general, creating an Azure Static Web App on top of an existing static application is as simple as running a command available from Azure's Visual Studio Code extension. Running that command creates a GitHub workflow for CI/CD with GitHub Actions.

Key features:

Web Hosting for static content
Integrated API support via Azure Functions
Globally distributed static content
Free SSL certificates
Custom Domains
Authentication Provider Integrations with Azure Active Directory, GitHub, and Twitter
Generated staging versions

API with Azure Functions

One of the big value adds of Azure Static Web Apps is its integration with the Azure ecosystem, and this is highlighted when it comes to creating a back-end API powered by Azure Functions. Adding an API to an existing Azure Static Web App is as easy as creating the SWA itself, with a command from the Azure extension.

This places Azure SWA's on the same platform as Netlify Functions and NextJS API Routes in terms of easily deploying a serverless backend API for our web applications.

Link to documentation for adding API to Azure Static Web App here.

Conclusion

The recent explosion of cloud infrastructure providers has truly made it easy for developers today to deploy affordable, and scalable, full-stack applications. The plethora of options means that developers can choose the best tool that fit's their project.

DigitalOcean is wholly geared towards simplifying the allocation of cloud infrastructure. With their VPS Droplets, App Platform, and Managed Kubernetes services, it's easy for smaller to mid-sized businesses to choose the best deployment solution that best fits their needs, whether it's from source-code or containerized images.

Azure, meanwhile, has always been one of the larger cloud providers. By creating Azure Static Web Apps, Azure mimics AWS's move in creating AWS Amplify and now stands with Netlify, Heroku, Vercel, and DigitalOcean's App Platform as a way to deploy a full-stack application.

The biggest takeaway is that there is no single one-size-fits-all solution for every type of application and business. It's essential to pick the best solution for the project at hand. If you're already invested in using different Azure services, deploying with Static Web Apps is a natural decision to continue leveraging that Azure investment. Looking to get started FAST with a containerized web service, and don't want to fuss with feature complexity? Give DigitalOcean a try.

This Dot is a consultancy dedicated to guiding companies through their modernization and digital transformation journeys. Specializing in replatforming, modernizing, and launching new initiatives, we stand out by taking true ownership of your engineering projects.

We love helping teams with projects that have missed their deadlines or helping keep your strategic digital initiatives on course. Check out our case studies and our clients that trust us with their engineering.

Matthew Pagan

@mastapegs @mastapegs

Understanding Vue's Reactive Data

Introduction Web development has always been about creating dynamic experiences. One of the biggest challenges developers face is managing how data changes over time and reflecting these changes in the UI promptly and accurately. This is where Vue.js, one of the most popular JavaScript frameworks, excels with its powerful reactive data system. In this article, we dig into the heart of Vue's reactivity system. We unravel how it perfectly syncs your application UI with the underlying data state, allowing for a seamless user experience. Whether new to Vue or looking to deepen your understanding, this guide will provide a clear and concise overview of Vue's reactivity, empowering you to build more efficient and responsive Vue 3 applications. So, let’s kick off and embark on this journey to decode Vue's reactive data system. What is Vue's Reactive Data? What does it mean for data to be ”'reactive”? In essence, when data is reactive, it means that every time the data changes, all parts of the UI that rely on this data automatically update to reflect these changes. This ensures that the user is always looking at the most current state of the application. At its core, Vue's Reactive Data is like a superpower for your application data. Think of it like a mirror - whatever changes you make in your data, the user interface (UI) reflects these changes instantly, like a mirror reflecting your image. This automatic update feature is what we refer to as “reactivity”. To visualize this concept, let's use an example of a simple Vue application displaying a message on the screen: ` In this application, 'message' is a piece of data that says 'Hello Vue!'. Let's say you change this message to 'Goodbye Vue!' later in your code, like when a button is clicked. ` With Vue's reactivity, when you change your data, the UI automatically updates to 'Goodbye Vue!' instead of 'Hello Vue!'. You don't have to write extra code to make this update happen - Vue's Reactive Data system takes care of it. How does it work? Let's keep the mirror example going. Vue's Reactive Data is the mirror that reflects your data changes in the UI. But how does this mirror know when and what to reflect? That's where Vue's underlying mechanism comes into play. Vue has a behind-the-scenes mechanism that helps it stay alerted to any changes in your data. When you create a reactive data object, Vue doesn't just leave it as it is. Instead, it sends this data object through a transformation process and wraps it up in a Proxy. Proxy objects are powerful and can detect when a property is changed, updated, or deleted. Let's use our previous example: ` Consider our “message” data as a book in a library. Vue places this book (our data) within a special book cover (the Proxy). This book cover is unique - it's embedded with a tracking device that notifies Vue every time someone reads the book (accesses the data) or annotates a page (changes the data). In our example, the reactive function creates a Proxy object that wraps around our state object. When you change the 'message': ` The Proxy notices this (like a built-in alarm going off) and alerts Vue that something has changed. Vue then updates the UI to reflect this change. Let’s look deeper into what Vue is doing for us and how it transforms our object into a Proxy object. You don't have to worry about creating or managing the Proxy; Vue handles everything. ` In the example above, we encapsulate our object, in this case, “state”, converting it into a Proxy object. Note that within the second argument of the Proxy, we have two methods: a getter and a setter. The getter method is straightforward: it merely returns the value, which in this instance is “state.message” equating to 'Hello Vue!' Meanwhile, the setter method comes into play when a new value is assigned, as in the case of “state.message = ‘Hey young padawan!’”. Here, “value” becomes our new 'Hey young padawan!', prompting the property to update. This action, in turn, triggers the reactivity system, which subsequently updates the DOM. Venturing Further into the Depths If you have been paying attention to our examples above, you might have noticed that inside the Proxy method, we call the functions track and trigger to run our reactivity. Let’s try to understand a bit more about them. You see, Vue 3 reactivity data is more about Proxy objects. Let’s create a new example: ` In this example, when you click on the button, the message's value changes. This change triggers the effect function to run, as it's actively listening for any changes in its dependencies. How does the effect property know when to be called? Vue 3 has three main functions to run our reactivity: effect, track, and trigger. The effect function is like our supervisor. It steps in and takes action when our data changes – similar to our effect method, we will dive in more later. Next, we have the track function. It notes down all the important data we need to keep an eye on. In our case, this data would be state.message. Lastly, we've got the trigger function. This one is like our alarm bell. It alerts the effect function whenever our important data (the stuff track is keeping an eye on) changes. In this way, trigger, track, and effect work together to keep our Vue application reacting smoothly to changes in data. Let’s go back to them: ` Tracking (Dependency Collection) Tracking is the process of registering dependencies between reactive objects and the effects that depend on them. When a reactive property is read, it's "tracked" as a dependency of the current running effect. When we execute track(), we essentially store our effects in a Set object. But what exactly is an "effect"? If we revisit our previous example, we see that the effect method must be run whenever any property changes. This action — running the effect method in response to property changes — is what we refer to as an "Effect"! (computed property, watcher, etc.) > Note: We'll outline a basic, high-level overview of what might happen under the hood. Please note that the actual implementation is more complex and optimized, but this should give you an idea of how it works. Let’s see how it works! In our example, we have the following reactive object: ` We need a way to reference the reactive object with its effects. For that, we use a WeakMap. Which type is going to look something like this: ` We are using a WeakMap to set our object state as the target (or key). In the Vue code, they call this object targetMap. Within this targetMap object, our value is an object named depMap of Map type. Here, the keys represent our properties (in our case, that would be message and showSword), and the values correspond to their effects – remember, they are stored in a Set that in Vue 3 we refer to as dep. Huh… It might seem a bit complex, right? Let's make it more straightforward with a visual example: With the above explained, let’s see what this Track method kind of looks like and how it uses this targetMap. This method essentially is doing something like this: ` At this point, you have to be wondering, how does Vue 3 know what activeEffect should run? Vue 3 keeps track of the currently running effect by using a global variable. When an effect is executed, Vue temporarily stores a reference to it in this global variable, allowing the track function to access the currently running effect and associate it with the accessed reactive property. This global variable is called inside Vue as activeEffect. Vue 3 knows which effect is assigned to this global variable by wrapping the effects functions in a method that invokes the effect whenever a dependency changes. And yes, you guessed, that method is our effect method. ` This method behind the scenes is doing something similar to this: ` The handling of activeEffect within Vue's reactivity system is a dance of careful timing, scoping, and context preservation. Let’s go step by step on how this is working all together. When we run our Effect method for the first time, we call the get trap of the Proxy. ` When running the get trap, we have our activeEffect so we can store it as a dependency. ` This coordination ensures that when a reactive property is accessed within an effect, the track function knows which effect is responsible for that access. Trigger Method Our last method makes this Reactive system to be complete. The trigger method looks up the dependencies for the given target and key and re-runs all dependent effects. ` Conclusion Diving into Vue 3's reactivity system has been like unlocking a hidden superpower in my web development toolkit, and honestly, I've had a blast learning about it. From the rudimentary elements of reactive data and instantaneous UI updates to the intricate details involving Proxies, track and trigger functions, and effects, Vue 3's reactivity is an impressively robust framework for building dynamic and responsive applications. In our journey through Vue 3's reactivity, we've uncovered how this framework ensures real-time and precise updates to the UI. We've delved into the use of Proxies to intercept and monitor variable changes and dissected the roles of track and trigger functions, along with the 'effect' method, in facilitating seamless UI updates. Along the way, we've also discovered how Vue ingeniously manages data dependencies through sophisticated data structures like WeakMaps and Sets, offering us a glimpse into its efficient approach to change detection and UI rendering. Whether you're just starting with Vue 3 or an experienced developer looking to level up, understanding this reactivity system is a game-changer. It doesn't just streamline the development process; it enables you to create more interactive, scalable, and maintainable applications. I love Vue 3, and mastering its reactivity system has been enlightening and fun. Thanks for reading, and as always, happy coding!...

Nov 22, 2023

7 mins

VueJavaScriptTypeScriptWeb Development

State Management with Apollo Client and Vue using Reactive Variable

State Management is an integral part of Software development with tools like VueX, Pinia which is like VueX 5, Redux, Context API, and others. In our example, we will be using Vue3 composition API, a bit of TypeScript. This article will assume that you already have a project setup with Apollo. State Managemnet Before we dive into what state management is and what it offers, lets understand few thing which are integral to it. What is State? State is a part of an application, such as user details, usernames, login information, and website themes(dark or light). In simple terms, state is like a warehouse that's contents you can access when you need to from wherever you are. What is State Management? State Management is just simply a design pattern to help synchronize the state of the application throughout all of the components in the application. This also prevents us from passing too many props accross the application. When to implement State Management: - When the application contains large number of components. - To prevent redundant data, knowing well some other components might need that data. - Prevent passing props across the application, making it messy. For more explainations, you can check the links below: - What does state-management even mean and why does it matter in Front End Web Development with frameworks like React or Vue? by Sean Grogg - What does state-management even mean and why does it matter in Front End Web Development with frameworks like React or Vue? by Robert Polevoi - State management by Tom Nolle How to implement State management? There are so many ways to do it. But in this discussion, we will be implementing it with Vue Apollo. Apollo Client It is the client for Vue Apollo. It helps to easily integrate GraphQL queries and mutation in your application which, in our case, is Vue. Reactive Variables This is a new feature from Apollo Client 3. > Reactive variables are a useful mechanism for representing local state outside of the Apollo Client cache. How to create a Reactive variable in Apollo? This is quite simple since Apollo client provides us with makeVar. ` What the above code means is we make use of makeVar to create a variable of any type be it boolean, number, array, or object. Also, by calling the variable that makeVar is assigned to without passing a parameter will only output its current value, but passing a parameter will update its value. You can learn more about makeVar here. Setup of the Project We will be creating a state for a counter that does increment, decrement, or reset. But first, let's set up our enviroment. Setting up the Reactive variable Lets create our reactive variable in ./variables/counts.js: ` Configuring the cache Lets also update our cache config to something like this: ` Creating a component Let's create ./components/Counter.vue component: ` Please note that you can always get the counts value even without the GraphQL query. All you need to do is call count() like the example about _Reactive variables_, and force a re-render using loading as a ref. Like this: ` loading ref to help re-render when there is a change so as to get the latest value of counts. The manner you will prefer depends on what you want to achieve. But I will go with the example with the query as it still preserves the GraphQL feel. Conclusion State Management with Apollo Client saves you the stress of installing VueX, or Redux (for the React users), as long as the application makes use of Apollo. In this quick training, we learned about state and why state management is important to building and maintaining applications. Further, we learned how to manage state by using a reactive variable in Apollo. If you need any help understanding how to use this training, or additional clarification, please feel free to reach out to me....

Jul 27, 2022

3 mins

Web DevelopmentVue

How to Create a Custom React Renderer

Creating a Custom React Renderer At the very top of the React documentation, the team defines React's main qualities: - Declarative - Component-Based - Learn Once, Write Anywhere The main focus of the React docs is to demonstrate the first 2 qualities of React: its declarative nature, and how it allows the developer to break logic down into components. The main goal of this article will be to expand upon that third quality of React: "Learn Once, Write Anywhere." Requirements To follow along more easily with this post, you should already know a few things: - React: This post doesn't teach you how to declaratively write React, but instead dives into how React communicates with the DOM. Understanding how to write generic React code would be great foundational knowledge before diving into how it works under the hood. - The DOM: A lot of the interactions between React and the DOM are abstracted away under the 'react-dom' package. Having a good understanding of how to render to the DOM with vanilla JavaScript will be incredibly useful since we will be implementing this functionality ourselves. I've also created a repository based on the create react app starter, and added some nice-to-have features to it including: - TypeScript - ESLint - Prettier - Husky w/ pre-commit linting - Tailwind CSS You can test out your code using a vanilla create-react-app installation, but I enjoy these developer tools, so I wanted to offer a configured setup that uses them. Feel free to clone and use the repo! React DOM I'm sure that every single React developer has run create-react-app at least once. When creating a CRA app, 99% of your time is usually spent expanding the functionality of the App component. Very little time is spent on the piece of logic that actually renders the App component. This line is responsible for taking our React App component, and then mounting all of its components along with event handlers, to the DOM. We usually never need to worry about how React does this. Instead, we focus on declaratively adding functionality to the App components. Rendering to the DOM is abstracted away into this one line. This is similar to working with React Native. We develop Native App Components, but we don't think about *how* those components are rendered to different devices. React Native handles that for us, just like how ReactDOM handles rendering to the DOM for us. The Test Application To test out experimenting with our own custom React renderer, I've created a repository forked off of a create-react-app install, with added dev features like linting, git commit hooks, and TailwindCSS. Before diving into replacing ReactDOM, let's look at what our application can look like at the start. Replacing ReactDOM To replace the react-dom renderer with our own, we'll need to import 2 dependencies: - react-reconciler: This exposes a function that takes a host configuration object, allowing us to customize rendering to whatever format we desire. - @types/react-reconciler: Types for react-reconciler After installing these dependencies, we can replace ReactDOM with our new renderer, and then with the help of TypeScript, stub out the remaining portions of our new Renderer. What does a React renderer look like? The React team exposes their react-reconciler as a function to allow third parties to create custom renderers. This reconciler function takes one argument: a Host Configuration object that's methods provide an interface with which React can render to a host environment. The methods of the host configuration object map out to different methods of the configured host environment, allowing the developer to abstract away the process of rendering and updating the state to the environment. ` For example, here is real code from react-dom, which defines how to append a child in the DOM. In our example exploring this, we'll try and minimally recreate react-dom, so we can render our sample app to the DOM. Host Configuration With a stubbed DOM host configuration, and having replaced ReactDOM with our custom renderer, we are now able to run the CRA dev server without errors. However, nothing has been rendered to the DOM yet. Our host configuration method stubs included console.log's, showing when these methods get called though, so the log has a lot of activity. We can see bits and pieces of our App component in these logs, but since our host configuration did not actually mount anything to the DOM, our screen remains blank. Let's fill out a few of our functions to implement this behavior: - createInstance - createTextInstance - appendInitialChild - appendChild - appendChildToContainer TypeScript does a lot of mental heavy lifting by allowing us to define types and enhancing our development with auto-complete for implementing these host config functions. Types and generic host config signature: ` The createInstance function: ` The createTextInstance function: ` The appendChild function: ` In the end, it was just a few familiar DOM calls until we were able to render our application once again, except this time, with our own renderer! Conclusion With just a few method definitions, we are now able to render to the DOM, but we could have also just as easily issued commands to draw on a canvas when trying to render our components, or we could have rendered differently. By learning React once, you can apply it in a number of scenarios. By separating rendering logic from reconciliation logic, React allows third-party developers to create custom renderers. This allows developers to render whereever they want, be it in the canvas, or even to the console....

Sep 24, 2021

6 mins

React

Transforming Platform Engineering Through Chargeback Programs with Shuchi Mittal

Shuchi Mittal, the Head of Cloud enablement at Honeywell, discusses how she as a leader in platform engineering has been able to transform internal platform engineering teams at other organizations by providing teams with value-added services, and how they effectively managed costs. She talks about how to treat these teams as customers, and delivering services that meet the customer needs, but also charging them for their usage. By providing policy-compliant infrastructure and unique services tailored to their requirements, platform engineering teams can showcase their commitment to supporting the success of other teams within an organization. This approach not only fosters trust but also positions platform engineering as a strategic partner rather than just a service provider. By going beyond the basic infrastructure provisioning, the platform engineering team can offer services that help development and product teams streamline their processes and improve efficiency. Shuchi shares her work at Fiserv where she implemented a chargeback system to track usage and costs effectively, incentivizing better development practices. This not only helped in managing costs but also encouraged teams to optimize their resource utilization, leading to improved overall efficiency and more easily scalable systems. Her platform engineering team recognized the importance of effectively managing financial aspects to secure upfront investment for product development. By implementing a billing system based on gigabyte hours, they aligned costs with usage, enabling teams to have a clear understanding of their resource consumption. This approach not only provided transparency but also incentivized teams to adopt cost-effective practices. By strategically managing financial aspects, the platform engineering team gained the trust of stakeholders and secured the necessary resources to drive innovation and deliver value to the organization. Shuchi’s journey of platform engineering serves as a valuable example of how a team can transition from being a basic service provider to becoming an innovation partner within an organization. By building trust, offering value-added services, and strategically managing financial aspects, the platform engineering team successfully elevated their role and became a strategic enabler of innovation. Download this episode here....

Apr 16, 2024

2 mins

Engineering LeadershipSoftware Engineering

Deploying Web Applications with DigitalOcean and Azure

Building Modern Web Applications with DigitalOcean and Azure

DigitalOcean

The $5 Droplet

App Platform

Managed Kubernetes

Azure

Azure Static Web Apps (SWA's)

API with Azure Functions

Conclusion

Matthew Pagan

You might also like

Understanding Vue's Reactive Data

State Management with Apollo Client and Vue using Reactive Variable

How to Create a Custom React Renderer

Transforming Platform Engineering Through Chargeback Programs with Shuchi Mittal

You might also like

Understanding Vue's Reactive Data

State Management with Apollo Client and Vue using Reactive Variable

How to Create a Custom React Renderer

Transforming Platform Engineering Through Chargeback Programs with Shuchi Mittal