Modern code has moved away from manual coding and into optimized structures that provide a framework for effective code creation processes. Especially, for front end code.
Just because you can do it doesn’t mean that you should.
You have an HTML page — with the base structure looking something like this:
<!DOCTYPE> <html> <head></head> <body></body> </html>
<script src=""> tag, with a reference to where you file is in between the ” ” .
For some external scripts, it requires all the DOM elements to be loaded first, and hence the recommendation is to put the script src call right at the bottom.
To do this, it looks something like this:
The pros, the cons, and the horror stories of inline JS
Inline scripts are often seen in spaces such as Google Analytics tracking codes, site verifications and ownerships for webmaster tools, and initializing and setting parameters of external scripts.
Here’s one example:
While these implementations are innocent enough, they do become cumbersome to maintain over time if there are multiple pages involved. This becomes especially hard when the code is passed through multiple developers.
The code can grow into a large decentralized mammoth with potential for conflicts, and a unified approach to doing things.
However, this can cause issues for things like Google analytics, which works through an inline approach and requires the page to refresh in order to push over data for tracking.
When you’ve got a single page application, your root
index.html never had refreshes, unless you’ve got a special setup for it to happen with some enforced persistence for the app’s general data.
For external scripts to work properly, you can either find a module that supports it in the npm open-source space, or import the script into your Angular app and use the life cycle hooks to push or pull relevant data to the right places.
Like Angular, React can also be configured into a single page application (SPA), or ported over as widgets that sits inside other DOM-based applications.
As we move into an API based architecture for application stacks, the demarcation between front-end and backend creates clear boundaries between the types of architectures required to create a robust piece of software that are able to effectively integrate with one another.
If you are using a framework or library like Angular or React, using the traditional
Just because you can do it and in relative ease, it doesn’t mean that you should.