JavaScript: Developing a Custom Framework for Single-Page-Apps

Essentials: JavaScript in your Browser

  • The browser stops loading any other resource. It will execute all code in the context of the global object. Variable declaration will happen in this global space.
  • The browser stops loading any other resource. The code can access all variables defined in the global scope. It is not possible to either load additional modules, or to declare modules that can be imported with statements in other <script> tags. It will execute all code in the context of the global object. Variable declaration will happen in this global space.
  • The browser will define an event listener for the DOM object by the given function name. In JavaScript, function definitions in the global namespace will be hoisted up, which means you can use a function name before its declaration. However, the browser also happily allows a undefined function to be used in this context - this can result in hard to figure out bugs.
  • The browser stops loading any other resource. It will execute all code in the context of the global object, but allow the definition and loading of modules.
  • Page load interrupt: Some methods will stop the browser from loading any additional resources before the JavaScript is parsed completely. If you load either very complex code or a lot of code, this might interrupt the page load speed
  • Execution context pileup: When you constantly load new scripts from newly rendered pages, the total amount of JavaScript inside the browser thread continues to pile up and can slow down the page performance
  • Namespace pollution: Inside the browser, the global object will be window. Any JavaScript that is executed can change the definition of the window object. It can happen that you accidentally overwrite function definitions when scripts on different pages use the same function names, because they will be re-defined the global object.

Architecture of the Custom Framework

  • Use JavaScript modules to keep the namespace clear
  • Separate the application into the controller, action, and pages & components
  • Encapsulate HTML and JavaScript in the relevant components
  • Dynamically load and execute only required JavaScript

JavaScript Modules

Controller

Actions

Pages and Components

State

Conclusion

--

--

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