Angular Basics, Pros and Cons Explained

[Music] here's a short history of jquery for many jquery was their first javascript library back in 2006 when these guys dominated our desktops jquery helped to manipulate the document object model the tree shaped internal structure of the application jquery brought consistency to all browsers it was really good and really important until newer browsers and javascript itself learned to do the same in 2020 jquery is mostly mentioned in heated debates about how eminent its death is and often its death is predicted to happen at the hand of more advanced technologies that set the new standard for front-end development technologies like angular the pros and cons of angular understanding the main front-end technology [Music] bear with us for a moment because first we need to talk about the beginning angularjs jquery is a library and angular is a framework both libraries and frameworks are just collections of pre-written code it's like buying bricks instead of making them for mud but besides that frameworks also determine well the frame the basic structure of the future application libraries need a few extra tools for that modern frameworks like angular or ember were created by developers in the belief that a good product should be built and function in a particular way angularjs was created in 2010 by google developers mishko hevery and adam abrams they called the new framework angular because it works in an html file and html has angular brackets six years later it was completely rewritten so much so that you couldn't simply update to the new one you had to rewrite your whole application this created a reasonable divide between the users some couldn't justify the long and costly migration while others became fans of the improved version the older one bears the classic naming the new angular removed the ending in true minimalistic fashion still angularjs is supported and even used on some current google platforms angularjs appeared at the same time other classic javascript frameworks like knockout and backbone were born how exactly was it special then let's talk about the three pillars of angularjs two-way data binding dependency injection and directives let's tackle these complex phrases one by one as we said frameworks basically define what architecture the app will have the original angularjs implemented an architecture called model view controller or mvc it means that an application is separated into three layers model the layer responsible for the core logic of the app its rules view basically its interface and controller the part that accepts user inputs and sends responses back from model two-way data binding here means that both sides model and view are synchronized whatever happens in model is displayed on view and vice versa this meant that developers didn't need to write code for that exact purpose second dependency injection dependencies are relations between different pieces of code traditionally each object in the code has to construct a dependent object so if you want to change the dependency you'll have to change the object too so instead of attaching dependencies to objects angularjs attaches injectors to objects that link them to dependencies stored in a central location as a result you can reuse code and mock those dependencies when writing unit tests finally directives directives are the most used part of angularjs as they are the ones extending classic html they work as markers on a dom element telling angularjs what behavior to attach to that element basically they make it possible for html to create dynamic content so all of this established angularjs as the perfect tool for building single-page applications with tons of elements to interact with it helped engineers solve problems that they had before and the framework got so popular but large single page applications were doomed to be slow and laggy angularjs didn't provide any solution for that but another technology did react was produced by facebook another industry giant and became open source in 2013 react skyrocketed because it offered a different way and more importantly better way first it rolled back to one-way data binding and second it used components aiming to fix the problem with large spas then the same team released react native for building mobile apps using the same technology and principles it was a breath of fresh air for many devs frustrated with the old angularjs and react wasn't even a framework the angularjs team refused to accept defeat and launched a big update three years later the expectations for the update were too high the doubts even higher many still argue whether google exceeded them the pros of angular angular 2 no longer abided by mvc architecture it was now component-based like react this is when we finally talk about the mvc drawbacks the whole mvc pattern was borrowed from the back end since at that time the front-end applications were getting bigger and we didn't yet know how to structure them on the server interactions of view and controller were distinctly separated between the client and server side on the front end this separation wasn't as clear and the controller in angular was even created by the view this was breaking the single responsibility principle that says that every class or module should be responsible for just one function of the software the model failed the rule too it had to manage both ui and application states when facebook released react it called it the v in mvc introducing components components are independent features of the user interface with their own structure and apis they can be copied and reused easily tested and replaced also one component can be updated without refreshing the whole page while mvc separated all functions into different levels components have all those functions on the same level the view level so angular followed the path of becoming component based along with the architecture change the future angular versions offered four types of data binding one-way or unidirectional two-way event and property binding now developers could define the communication between the component and view also angular moved to typescript a popular superset of javascript that's similar enough to be easily learned and different for all the right reasons it has static typing catches more mistakes before production and the code is simply easier to read a lifesaver for distributed teams and typescript is compiled back to javascript switching to typescript also brought mobile development closer to angular developers typescript is also used in nativescript a mobile framework for building cross-platform apps this connection allows you to port up to 90 percent of code from your web application into mobile more than that angular and native script share a lot of engineering concepts like dependency injection and data binding so learning angular enables you to use the same coding skills for building apps finally angular's big benefit was ngrx a state or data management tool in component based architecture each component has its own state and no idea what other state is ngrx allows to share this information seamlessly by keeping the state in a central store creating a single source of truth what about the performance problems thanks to a new architecture and additional binding techniques angular 2 managed to boost the application speed and it continues to do so by introducing more features it made dependency injection hierarchical now angular builds a hierarchy tree where injectors are coordinated with components and you can apply dependencies and services to a whole subset of components it also introduced an optional service called angular universal that renders the view on the server instead of a client the problem with single page applications is that they are initially rendered on a user's browser while this has some benefits it also means that the app loads slower with angular universal the server will pre-render the web app while the browser is still loading it in the background on top of that it provides search engine crawlers with a pre-rendered page instead of a page lacking some content this helps with search engine optimization another fan favorite feature is zone a library that notifies angular when asynchronous operations are complete so it knows which zones and when to re-render before angularjs would simply reload the whole application with time angular acquired a few useful tools to improve performance even more like lazy loading the technique allowing you to delay the loading of a component until it's needed and while it grew immensely in comparison with its past self angular remains one of the most robust frameworks in its never-ending battle with react and view js that every tech blog on the planet feels the need to cover it keeps losing to the latter's simplicity and performance and even if comparisons seem invalid because of the different nature of those tools the community remains dedicated to newer ones the cons of angular a big part of the community is still skeptical about the upgrade even after several years for beginners entering the controversial environment might be unappealing for experts it seems a good time to leave it if the path to the better angular is so laborious maybe it makes sense to take an entirely different path big legacy applications decide to stay with angularjs just because the cost of moving their whole product is unbearable smaller products often look at different options considering that google will stop maintaining angularjs in july 2021 you'll have to make the choice very soon but a new large and long term project will find angular a perfect fit angular is verbose and hard to learn but for a reason it gives you everything out of the box for holistic front-end development and in return it asks for a bit more time and dedication new versions are popping up all the time and google provides continuous support using it in tons of its own platforms besides a good application is rarely good because of its technology it's good because the code is good and good technology helps developers create it [Music] do

Channel: AltexSoft

Views: 18,736

Rating: 4.9364071 out of 5

Keywords: Angular, AngularJS, framework, javascript, React, vuejs, vue, ngrx, zonejs, html, databinding, directives, mvc, components, dependencyinjection, nativescript, what is angular

Id: y14f_VFsZIA

Length: 11min 40sec (700 seconds)

Published: Tue Jul 21 2020