N
NukeZilla
Enthusiast
Hands up if your currently using a 3rd party framework (Angular, Aurelia) or large libraries (React and Jquery, Backbone). Now task yourself why are we all relaying on over engineered frameworks. It's got so bad many developers are even turning to Sass or less to help them write reusable code. About a year ago I was contently driving to write website with the latest tools for performance and quick development. I was even spending hours every weekend looking for better pre-compilers to increase delivery.
But why?
When I first started working with Angular I turned to my manager and asked why are we using angular? His response was reusability and maintainability The same response when I asked a different manager why are we using SASS.
We live in 2016, not the past.
In the past front-end development was a nightmare, and required tools like sass and less. But this is 2016! new development standards are coming out yearly. Take SASS and Less, I use to love it as you can create a variable file to set out your branding guidelines and common typography. But the people over at W3 been listening. You can now declare native variables in CSS. You can even use Calc to work out maths.
ECMAScript Yearly Updates
It's not just W3 that's making improvements. ECMAScript (ES) the community behind setting the specification for scripting-language (JavaScript & ActionScript) has pledged yearly updates. The current proposals of ES7 can be found on [Click here to view this link]. Many thanks to Angular many developers are converting over to TypeScript. Again I ask you why? Many responses I've been given comes down to Type checking and because google guys over at Angular promotes it. But I found this extremely lazy. Better still I recall asking a few of these people, do you know how TypeScript compiles into JavaScript? Majority answered "no". One person even went as far as saying "I write this piece of code and does its thing and It works. That's all I care about"
Many like the fact that TypeScript offers so-called "private fields" Yet when compiled into JavaScript it's not even placed in WeakMap. But thanks to [Click here to view this link](chromium) and [Click here to view this link] (Salesforce) who are currently working on a Babel transform you will soon be able to write [Click here to view this link] shortly.
Drive for Reusability resulted in messy Frameworks
In a drive for reusability, we have resulted in Frameworks. The image on the above is simple Angular Project. Does this look familiar? We are not making stupid components for everything. What every happened to the good old day's of development when you only have a couple of folders and easy to navigate? Many will try and explain the reason for this mess results in more complex websites. I understand this but have you notice something? The real problem is down to popular frameworks. Angular and react promote everything as a component, however in reality it's not. You actually destroying your consumer's bandwidth and eating heavily into machine memory usage.
History API and Shadow DOM
Now a day's on linked in I read people asking what front-end framework should I learn now. Every time I see this I end up laughing to myself. Looking at the image above thanks to Eric Wastl over at vanilla-js if you are after performance then you can't beat using vanilla-js. I honestly believe that the majority of JavaScript developers have a) forgotten how to write plain JavaScript or b) Don't even know what it full stop.
Let us take a look at SPA applications. In a quest to lower HTTP call we now requiring full frameworks to only fetch the components that's required, This was good back in 3G days where mobile companies were offering "unlimited" Bandwidth. But now we are on 4G and soon to be 5G Mobile companies are become tight again and limiting to a couple of GB. So scrapping frameworks for smaller required functionality would be better. So let's see what's available using "plain old boring" JavaScript.
First, we have History API. Surprisingly or not through all of Facebook react-router and angular-router HUGE unneeded file, it uses HISTORY API. Using Push states and Fetch API (Yes, that's right folks. ECMAScript making complex calls simpler). You can make a single page application in 100 lines of code!
OK so I see your point on routing but I use Frameworks for components! Introducing Shadow DOM. You can create components using just JavaScript, all you have to do is query the dom for HTML 5 standard custom attributes.
And then attach your shadow DOM from a component folder to your elements. it's extremely simple and flexible. You know have reusable components without the overheads.
Finally, take a look at decorators. You can create simple but effect reusable code with minimal effort, for instance, creating a Dependency injection using a decorator is much easier than writing long complex code over and over again. But once more Decorators can be great in Unit Testing and even for validating types. We could a decorator called types which take in an object to check against. This allows you to have strongly typed language in JavaScript and using Unit testing frameworks to validate the types are correct. I've found this on GitHub of someone using decorators for type [Click here to view this link].
Complex build instead of complex systems
Some of you may be thinking this is all great but ES6 and Css variables is only supported on latest browsers, never mind ES7 and CSS4. The solution to your problems can be resolved with a build system.
CSS Next is a plugin for PostCss. This allows you to write none browser specific code and CSS 4 Today and CSS Next will compile NATIVE CSS with backdated support. Meaning in 5 years time there no need to remove browser supported code.
Babel will translate any ES... into an older version of ES standards using polyfill and code transformers. Just like CSS Next you have the latest standards today meaning in a couple of years time, your code won't need to be updated.
Final Thoughts
Using frameworks sounds like a good idea. But how many developers are having to learn Angular 2 way or even worst another framework because angular 1 will soon no longer be supported? What happens if both Google and Facebook stops support on Angular and react? Might be thinking that won't happen or we will just recede and waste money. Will remember [Click here to view this link]? most will but some lucky people won't. It was a popular Node Package which in March 2016 was responsible for "crashing majority of the internet. The person behind the package took package down because of some legal fight. So never think something won't happen and always plan for the unexpected.
But why?
When I first started working with Angular I turned to my manager and asked why are we using angular? His response was reusability and maintainability The same response when I asked a different manager why are we using SASS.
We live in 2016, not the past.
In the past front-end development was a nightmare, and required tools like sass and less. But this is 2016! new development standards are coming out yearly. Take SASS and Less, I use to love it as you can create a variable file to set out your branding guidelines and common typography. But the people over at W3 been listening. You can now declare native variables in CSS. You can even use Calc to work out maths.
Code:
:root {
--main-bg-color: brown;
}
.one {
color: white;
background-color: var(--main-bg-color);
margin: 10px;
width: 50px;
height: 50px;
display: inline-block;
}
It's not just W3 that's making improvements. ECMAScript (ES) the community behind setting the specification for scripting-language (JavaScript & ActionScript) has pledged yearly updates. The current proposals of ES7 can be found on [Click here to view this link]. Many thanks to Angular many developers are converting over to TypeScript. Again I ask you why? Many responses I've been given comes down to Type checking and because google guys over at Angular promotes it. But I found this extremely lazy. Better still I recall asking a few of these people, do you know how TypeScript compiles into JavaScript? Majority answered "no". One person even went as far as saying "I write this piece of code and does its thing and It works. That's all I care about"
Many like the fact that TypeScript offers so-called "private fields" Yet when compiled into JavaScript it's not even placed in WeakMap. But thanks to [Click here to view this link](chromium) and [Click here to view this link] (Salesforce) who are currently working on a Babel transform you will soon be able to write [Click here to view this link] shortly.
Code:
class Person{
static #currentId
static get getNewId() { return #currentId++; }
#id;
name;
constructor(name = "Joe Blogs") {
#id = Person.getNewId();
this.name = name;
}
get id() { return #id }
}
Drive for Reusability resulted in messy Frameworks
In a drive for reusability, we have resulted in Frameworks. The image on the above is simple Angular Project. Does this look familiar? We are not making stupid components for everything. What every happened to the good old day's of development when you only have a couple of folders and easy to navigate? Many will try and explain the reason for this mess results in more complex websites. I understand this but have you notice something? The real problem is down to popular frameworks. Angular and react promote everything as a component, however in reality it's not. You actually destroying your consumer's bandwidth and eating heavily into machine memory usage.
History API and Shadow DOM
Now a day's on linked in I read people asking what front-end framework should I learn now. Every time I see this I end up laughing to myself. Looking at the image above thanks to Eric Wastl over at vanilla-js if you are after performance then you can't beat using vanilla-js. I honestly believe that the majority of JavaScript developers have a) forgotten how to write plain JavaScript or b) Don't even know what it full stop.
Let us take a look at SPA applications. In a quest to lower HTTP call we now requiring full frameworks to only fetch the components that's required, This was good back in 3G days where mobile companies were offering "unlimited" Bandwidth. But now we are on 4G and soon to be 5G Mobile companies are become tight again and limiting to a couple of GB. So scrapping frameworks for smaller required functionality would be better. So let's see what's available using "plain old boring" JavaScript.
First, we have History API. Surprisingly or not through all of Facebook react-router and angular-router HUGE unneeded file, it uses HISTORY API. Using Push states and Fetch API (Yes, that's right folks. ECMAScript making complex calls simpler). You can make a single page application in 100 lines of code!
OK so I see your point on routing but I use Frameworks for components! Introducing Shadow DOM. You can create components using just JavaScript, all you have to do is query the dom for HTML 5 standard custom attributes.
Code:
document.querySelectorAll('div[data-jh-widget-prices]');
And then attach your shadow DOM from a component folder to your elements. it's extremely simple and flexible. You know have reusable components without the overheads.
Finally, take a look at decorators. You can create simple but effect reusable code with minimal effort, for instance, creating a Dependency injection using a decorator is much easier than writing long complex code over and over again. But once more Decorators can be great in Unit Testing and even for validating types. We could a decorator called types which take in an object to check against. This allows you to have strongly typed language in JavaScript and using Unit testing frameworks to validate the types are correct. I've found this on GitHub of someone using decorators for type [Click here to view this link].
Complex build instead of complex systems
Some of you may be thinking this is all great but ES6 and Css variables is only supported on latest browsers, never mind ES7 and CSS4. The solution to your problems can be resolved with a build system.
CSS Next is a plugin for PostCss. This allows you to write none browser specific code and CSS 4 Today and CSS Next will compile NATIVE CSS with backdated support. Meaning in 5 years time there no need to remove browser supported code.
Babel will translate any ES... into an older version of ES standards using polyfill and code transformers. Just like CSS Next you have the latest standards today meaning in a couple of years time, your code won't need to be updated.
Final Thoughts
Using frameworks sounds like a good idea. But how many developers are having to learn Angular 2 way or even worst another framework because angular 1 will soon no longer be supported? What happens if both Google and Facebook stops support on Angular and react? Might be thinking that won't happen or we will just recede and waste money. Will remember [Click here to view this link]? most will but some lucky people won't. It was a popular Node Package which in March 2016 was responsible for "crashing majority of the internet. The person behind the package took package down because of some legal fight. So never think something won't happen and always plan for the unexpected.
Last edited: