Angular 4 - History, Why(s), Angular 4 Basic Design
Brief History
once upon a time a nice company developed a browser named NetScape. all you youngsters that doesn't know what that is, go read that Wiki. anyway they changed the web by inventing JavaScript.
with time all new browsers adopted the new scripting language and each implemented it a bit different. you needed to be a real expert to do something better than an alert() or confirm(). the best you had was simple forms. i think we can date this up to the early 90's.
then came some standards about JavaScript and CSS, and Java and Microsoft and more developed Web Platforms, which could do cool things in the server, but the client side was the land of jQuery.
jQuery was (and still is) an outstanding project for Cross Browser Development upon the Client Side, making is simple to do the same thing with all browsers, including DOM manipulations, Creation, CSS, and even Animations. being a web dev meant being a jQuery man and the term Plugin was actually jQuery plugin.
there were some other growing Frameworks like KnockoutJS and BackBoneJS, you can see most of them in this awesome TODO's Tutorial with EACH framework called TodoMVC, and they sometime remove old or non-popular ones.
then, a bit before 2010, browsers became strong and more elegant, complex, heavy-duty stuff could be done so people moved from Plugins to Frameworks. Framework MEANS you do EVERYTHING in and by and with the framework, according to its way. and that's very important note.
so many frameworks came, and the real war in the beginning was Angular.js and Ember.js. then came React.js. but why? (read some in sitepoint for example)
well, just like you want to move from Assembly to C to C++ to C#/Java, its kinda the same. people, adopted by Corps, wanted more power in the JS field, so the creating great things, each with a bit different philosophy, some wants to help you push in some components with more power, like React, and some want to take over with a lot of steroids, like Angular.
so Angular survived all the way, made some changes, and got the idea of its real power - take over the entire Client / SPA dev eco-system its own way, and make it the best.
its important to understand that, since many people complain about the Learning Curve, and how hard it is to make simple things with Angular, and the are right, if you want simple help with your website you should use jQuery. for a complex component, but still just 1 or few but inside your website, use React. for a complex SPA like GMAIL or heavy TDD use Angular.
i must mention TypeScript here, and the link is to the Docs intro, that changed everything too by making JS as an OOP language, or at least more Typed, as many, many of the followings is based on that.
so with all that going on, and everybody struggling with the same burdens with every front, web or SPA, the W3C, which is in charge on how our web is built like the API's the browsers should offer, decided to change everything.
HTML 5 now gives you elements you used to need plugin and flash.
CSS 3 now offers Animations and Responsive tools.
JavaScript, ECMAScript 6, now offers most of what you used to need jQuery for.
and some new concepts are around now, born by Angular JS and its friends long time wars like
WebPack - you have 20 little JS files for 20 components each with html and css? lets make it all 1 thing.
Shadow DOM - take a piece of HTML, CSS and JS and hide it in a little box that is a new HTML Element, like input type "range".
Web Components - just like in server side programming you have a DLL for each thing, or a library or user control or whatever, in the web when a certain part must do its own job independently its technically called a component, doesn't matter if its on the whole page or a little clock.
with all that, a web dev can now do everything he used to do with jQuery or basic angular or react with pure JS, CSS, and HTML. so no more need for those. so whats now?
so now with no more solutions that were made to solve problems, like jQuery and AngularJS, and even React, each "item" moved on to better implementing each its own philosophy, with the help of NodeJS.
NodeJS is another thing that changed the web. not because its a server platform built on JavaScript, but because its light enough to be used as a help tool, not noticed by the main framework. thus when developing with Angular 4 and others you have a dev enviorment based on Node.
also, Windows adopted the CLI, meaning you can do many things new with the Command Line Interface, your CMD, that thing that looks like DOS. so for example, creating a new project in VS, of template MVC5 just write "create mvc5", and boom, no more screen with some choices ect., and adding a folder with all that 3rd party nuget - again, just "npm bla bla". Linux people are happy, but its still hard to install anything on linux, but for devs, that makes a lot of possibilities, like creating and entire angular4 project with all needed in 1 line, or adding a component or anything in 1 line, what used to take a lot of coding.
Could made a lot of space for us to deploy our things, via git, so that's another thing, you can now easily put your code in the cloud, build it and run it, .Net or JS.
so what do they what and how they do it?
jQuery still wants to offer you even more simple life.
TypeScript want to change JavaScript again, and they are doing it well and being adopted.
React wants to help you do components more easily.
Angular want to be you Steroids Framework.
so for just some quirks go pure JS CSS.
for extras and plugins jQuery.
for anything that is NOT big SPA, or if you don't need or want a Framework limitation, use React.
if you're going SPA, big thing-big framework, or really Complex, here comes Angular 4
i must admit i didn't use Angular 2, yet used Angular JS from 1.0.8. i got the point where it wants to be the overseer and i liked the way it did it. 2 was an experiment with the new ongoing stuff so i just waited for 4.
so since angular wants to rule them all, they went this way. so no more a simple JS file with the framework, but you create a big projects that allows you to manage everything and then "compile" it to (5) js file(s).
also project is based on Node so when you save immediately you see all changed in the browser.
CLI for not being depended on an IDE, commands to create items, build them, test, deploy ect.
WebPack so you can still write a lot of small components, directives, css files, ect. ect. and it will render evreything into 5 files, 1 for the framework dependency, and 1 for your code. the others in the next post.
and the made it all prepared for git deployment :)
so how do you use and tame it? lets find out in our next post "Angular 4 - Understanding Angular 4 Basics and Files".
for the entire serie
"Angular 4 with .NET (webForms/MVC) Tutorial - Table Of Content"
Stone Age
once upon a time a nice company developed a browser named NetScape. all you youngsters that doesn't know what that is, go read that Wiki. anyway they changed the web by inventing JavaScript.
with time all new browsers adopted the new scripting language and each implemented it a bit different. you needed to be a real expert to do something better than an alert() or confirm(). the best you had was simple forms. i think we can date this up to the early 90's.
jQuery Age
then came some standards about JavaScript and CSS, and Java and Microsoft and more developed Web Platforms, which could do cool things in the server, but the client side was the land of jQuery.
jQuery was (and still is) an outstanding project for Cross Browser Development upon the Client Side, making is simple to do the same thing with all browsers, including DOM manipulations, Creation, CSS, and even Animations. being a web dev meant being a jQuery man and the term Plugin was actually jQuery plugin.
there were some other growing Frameworks like KnockoutJS and BackBoneJS, you can see most of them in this awesome TODO's Tutorial with EACH framework called TodoMVC, and they sometime remove old or non-popular ones.
Angular JS Age
then, a bit before 2010, browsers became strong and more elegant, complex, heavy-duty stuff could be done so people moved from Plugins to Frameworks. Framework MEANS you do EVERYTHING in and by and with the framework, according to its way. and that's very important note.
so many frameworks came, and the real war in the beginning was Angular.js and Ember.js. then came React.js. but why? (read some in sitepoint for example)
well, just like you want to move from Assembly to C to C++ to C#/Java, its kinda the same. people, adopted by Corps, wanted more power in the JS field, so the creating great things, each with a bit different philosophy, some wants to help you push in some components with more power, like React, and some want to take over with a lot of steroids, like Angular.
so Angular survived all the way, made some changes, and got the idea of its real power - take over the entire Client / SPA dev eco-system its own way, and make it the best.
its important to understand that, since many people complain about the Learning Curve, and how hard it is to make simple things with Angular, and the are right, if you want simple help with your website you should use jQuery. for a complex component, but still just 1 or few but inside your website, use React. for a complex SPA like GMAIL or heavy TDD use Angular.
i must mention TypeScript here, and the link is to the Docs intro, that changed everything too by making JS as an OOP language, or at least more Typed, as many, many of the followings is based on that.
Age of JavaScript 6, HTML 5, CSS 3, and Components.
HTML 5 now gives you elements you used to need plugin and flash.
CSS 3 now offers Animations and Responsive tools.
JavaScript, ECMAScript 6, now offers most of what you used to need jQuery for.
and some new concepts are around now, born by Angular JS and its friends long time wars like
WebPack - you have 20 little JS files for 20 components each with html and css? lets make it all 1 thing.
Shadow DOM - take a piece of HTML, CSS and JS and hide it in a little box that is a new HTML Element, like input type "range".
Web Components - just like in server side programming you have a DLL for each thing, or a library or user control or whatever, in the web when a certain part must do its own job independently its technically called a component, doesn't matter if its on the whole page or a little clock.
with all that, a web dev can now do everything he used to do with jQuery or basic angular or react with pure JS, CSS, and HTML. so no more need for those. so whats now?
New Age, with NodeJS and CLI, Cloud and git
so now with no more solutions that were made to solve problems, like jQuery and AngularJS, and even React, each "item" moved on to better implementing each its own philosophy, with the help of NodeJS.
NodeJS is another thing that changed the web. not because its a server platform built on JavaScript, but because its light enough to be used as a help tool, not noticed by the main framework. thus when developing with Angular 4 and others you have a dev enviorment based on Node.
also, Windows adopted the CLI, meaning you can do many things new with the Command Line Interface, your CMD, that thing that looks like DOS. so for example, creating a new project in VS, of template MVC5 just write "create mvc5", and boom, no more screen with some choices ect., and adding a folder with all that 3rd party nuget - again, just "npm bla bla". Linux people are happy, but its still hard to install anything on linux, but for devs, that makes a lot of possibilities, like creating and entire angular4 project with all needed in 1 line, or adding a component or anything in 1 line, what used to take a lot of coding.
Could made a lot of space for us to deploy our things, via git, so that's another thing, you can now easily put your code in the cloud, build it and run it, .Net or JS.
so what do they what and how they do it?
jQuery still wants to offer you even more simple life.
TypeScript want to change JavaScript again, and they are doing it well and being adopted.
React wants to help you do components more easily.
Angular want to be you Steroids Framework.
so for just some quirks go pure JS CSS.
for extras and plugins jQuery.
for anything that is NOT big SPA, or if you don't need or want a Framework limitation, use React.
if you're going SPA, big thing-big framework, or really Complex, here comes Angular 4
Angular 4
i must admit i didn't use Angular 2, yet used Angular JS from 1.0.8. i got the point where it wants to be the overseer and i liked the way it did it. 2 was an experiment with the new ongoing stuff so i just waited for 4.
so since angular wants to rule them all, they went this way. so no more a simple JS file with the framework, but you create a big projects that allows you to manage everything and then "compile" it to (5) js file(s).
also project is based on Node so when you save immediately you see all changed in the browser.
CLI for not being depended on an IDE, commands to create items, build them, test, deploy ect.
WebPack so you can still write a lot of small components, directives, css files, ect. ect. and it will render evreything into 5 files, 1 for the framework dependency, and 1 for your code. the others in the next post.
and the made it all prepared for git deployment :)
so how do you use and tame it? lets find out in our next post "Angular 4 - Understanding Angular 4 Basics and Files".
for the entire serie
"Angular 4 with .NET (webForms/MVC) Tutorial - Table Of Content"
Comments
Post a Comment