Build web service with Handbag Cycle

The Web is the most successful and well-maintained non-OS platform which has an ecosystem with unprecedently good compatibility. For example, there are a lot of apps started from web-based services like medium, notion.so, facebook, etc. We call them web-based SaaS which can be accessed by anybody using a web browser.

A Web browser makes developers it so easy to deploy, develop an application without several concerns, unlike the normal local applications which are deployed by execution file. The Web gave liberty to developers to not care about OS. However, that liberty can confuse developers because of diverse forms of Service lifecycle. For this reason, I’ll introduce one form of web service cycle Handbag Cycle with examples per 3 levels.

Simple Access

Saas handback cycle

Components

The Handbag Cycle divides the service cycle into Four components.

  • Developer who create and improve Software
  • Software composed with source code
  • Service side which runs Software
  • User side which uses Service

Cycle Arrows

  1. The developer participates or is assigned to software feature (upward arrow)
  2. Developers contribute(downward arrow) to source code.
  3. Source codes are packed into Software and delivered as a form of Service.
  4. Service is accessed and used by users
  5. Users give feedback based on user experience.

The upper diagram is minimal abstraction describes the Handbag Cycle. We will go deep inside components per level with examples.

Web example with Components

Web SaaS Handback Cycle

Components

  • User access service in Web Browser
  • Software source code is stored to Repository
  • Service run inside Linux Container
  • Developers develop inside IDE

Four blue-gray cards are de facto for each component. These instances are what you have to know about. Kubernetes is a Linux Container Orchestration Platform. Github is the most influential remote git repository. I do not need to mention Chrome’s importance in the web ecosystem.

https://insights.stackoverflow.com/survey/2021

Recommanded Stack

Recommanded stack for web SaaS with handback cycle

This structure is a composition of the Handbag Cycle with personal preference components. Let’s talk about the more specific flow of the Service Cycle.

  1. The developer clones software source code to PC (upward arrow)
  2. Developers push (downward arrow) to Github Repository.
  3. Changes are merged into source code by pull request
  4. source code build to software while passing through CI pipeline like Github action
  5. software are deployed and become service pass through CD pipeline like ArgoCD
  6. service in the container platform like GKE use fetch stateful domain data in DB
  7. Some DNS services like Cloudflare make a point to users to access the web application
  8. Service runtime log access data to Time Series storage
  9. User share usage experience to SNS like Twitter
  10. Another user participates in using the service.
  11. Users give readable feedback to Software in Github Issues or email or something

Other Recommendations

Github Issue can be substituted by Azure DevOps Board or Jira etc. If you want free Kubernetes, Okteto is one solution. Vercel, Cloudflare Worker is another option if you do not need Kubernetes. IPFS, Cloudflare page, Netlify are other options if your application is static.

Conclusion

The most important thing to maintain a service is feedback which motives development. For more feedback, a bigger community is needed. The community can be a user community or an open-source community. Nowadays several open source web applications that support SaaS are increasing. For instance, Standard Note and Outline are very useful software that is open source and can be self-hosted. This liberty is maintaining the Web ecosystem.

Also, a nice CI/CD pipeline is important because it lowers entries to deploy service. There are several ways and new technologies in this area. Linux Container is hard to understand, set up, and manage. However, that method should be a supporter of your service, not an object. It is important to know fancy CI/CD’s purpose is seamless development.

To be honest, this Handbag Cycle is not a brand new structure as you know. Many organizations’ services can be interpreted as a Handbag Cycle. However, recognizing the four components of the service cycle will make it easier to improve your software.

Thanks for reading. Below is the diagram link.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store