Welcome Guys. In this blog we will explore how I built a simple application that Generate Quick Response Codes for given data. You can access the app here: QR Code Generator.
I built it using JS library called “qrcode” which allows the browser to generate QR Images using javascript in browser without backend. This type of applications are called Static Web App.
Before Exploring about the Application Architecture, Let me introduce basic concepts of Web Application types.
Web Applications Types:
In modern world, Applications are divided into two catagories.
- Static
- Dynamic
Static: The term refers the application’s ability to work in client browser without requiring backend. It Used for simple functions like getting data from user, presenting them and perform low-level functions. Like Greeting users with messages, showing images and simple designs.
Dynamic: The application that have server where it can execute codes independently and return response back to users. It construct a Full-Stack application which requires complex functions that can’t be executed on client side. Like User authentication and business logic.
Now we move to the Architecture of the Static QR Code App:-
My static app doesn’t have very complicated architecture. It has all of it codes and files in Github:-
1.Github And Github Pages:
Github is an popular application backed by Git used for store and version control our Code in cloud. We can locally clone it, made changes and Push it to github. It will serve all our contents whenever we request it.
Github contains all of my web files on it. My site simply loads it within <Iframe>. It grabs the page and render it.
Github allows you to use your repository(Folder for codes) to serve as web pages. it gives to custom subdomain from github.com.
For example here is my code repo on github:
2.Browser:
When your browser try to load my website page, It loads Github pages on it (iframe). So the html and js files are executed in your browser.
When you enter text to the Application, your browser is responsible for generating the QR code by using my source code.
Conclusion:
Static apps are good for small solutions and doesn’t have much business goals. All of the codes were executed an client side(Anyone can see the source code)..
But when application requires more complicated functions like Authentication it doesn’t safe to build them as static page because all of the codes were accessible by users..
