Why You Should Use AngularJS in your Next Web Application
Adding a new javascript framework like AngularJS to your web app requires some careful evaluation. Most projects already are using jQuery, maybe jQuery UI, and potentially other javascript libraries to handle other functionality not covered by jQuery or even jQuery plugins for UI elements like charts, multi-selects, infinite scrollers, sliders, etc. Any javascript framework has a tough task to find a space to fill with developers.
Your decision might consider the additional lines of code added, worrying about if this may slow down your javascript execution, or page load times. You know you will also have a huge initial learning phase where you discover how to use, then try to learn best practices as you start to play around with implementing your app. Maybe you are concerned that it is just a fad framework too, there are other options for similar Javascript frameworks like Backbone.js, Knockout.js.
For most, I bet the initial learning phase and temporary slowdown in development is the primary hurdle. This can slow down a project that could be quickly done with existing technology. The long term benefit has to be there in order to spend your time learning and figuring out best practices, and ultimately the new piece of technology must be solving a problem in your software architecture to justify the time.
I found when researching AngularJS and going through the process of implementing an app with it, that it was going to be a great tool in making web applications. For a big list of criteria I recommend to evaluate when considering adding a new component to your web application, check out my article here titled 18 Questions to Ask Before Adding New Tech to your Web App. Here are some of the criteria from that list and how my evaluation of AngularJS went. It's my opinion that there is a significant hole in front-end web development that AngularJS fills.
1. Address some problems in your software architecture
When writing web applications, I have objects in the server-side code that often times aren’t represented as objects in the client-side code. For simple apps, this might be OK, but when it gets complicated, it can be a big help to mirror these objects on both sides. Also leads to a terminology issue, a Person object on the server can’t truly be talked about as a Person on the client side because it doesn’t look or feel the same way. Doesn’t have the same methods, isn’t represented as code, sometimes is stuffed into hidden inputs or in data attributes.
Managing this complexity can be very hard. AngularJS has ng-resource which you use to create services that hook up to REST APIs and return back that object in JSON and you can attach methods to that object so it can be a fully functional object. It feels more like something familiar to what you are working with on the server side. All without much work on your end, you have methods like save(), get(), update(), that map to REST API endpoints and are most likely the similar methods you might have in your Data Mapper on the server side.
AngularJS encourages you to also deal with models on the client side just like you have them on the server side, big plus there.
I also don’t feel like the design using jQuery + Mustache is elegant when it comes to having an object that has properties represented in different ways within the web UI. An example, you have a table of Person objects from the REST API, you have a button for each Person to denote they have “Accepted” an invitation, so when they click, you want the checkbox to change and you want the style on the row to change. In jQuery, you listen for the checkbox change event, then you toggle the class on the button and the row. In AngularJS, the model is the source of truth so you build everything from that.
See what I mean by taking a look at this jQuery vs. AngularJS plunker I created and compare the type of code you write.
2. Enable you to create software more quickly and with less effort
AngularJS having the ng-model and ng-class directives alone cover so many of the common operations that we all have been doing in jQuery. Two-way data binding and saving to the server now takes a small number of lines in AngularJS, but in jQuery would require creating your own object, and several different click and event handlers. Switching from watching elements and events to watching a model is a big shift in the right direction.
3. Result in software that is more maintainable
AngularJS encourages using the model as the source of truth, which starts to get you to also think object oriented design on the client-side. This allows you to keep in mind the same object-oriented design principles that in general make software more maintainable compared to procedural.
4. Improve the testability of your software
AngularJS has dependency injection at its core, which makes it easy to test. Even the documentation on the AngularJS site has testing as a part of every tutorial step, which almost makes it hard NOT to test.
5. Encourage good programming practices
Model as the source of truth, dependency injection, ability to create directives that can decorate elements that lends to reusable and shareable components, REST API connection to your server, lots of benefits from just following AngularJS basic usage.
6. Allow you to collaborate more easily with other people
Using models as the source of truth is something that is familiar with anybody who is doing object-oriented MVC server-side software, so this should make it easy to pick up for most web developers.
Also, being able to create directives in AngularJS and dependency injection makes it easy to create components that can be shared easily between developers and really has excited the developer community. Lots of existing projects have developed AngularJS directive bridge libraries so you can use their code by tossing an AngularJS directive to decorate an existing element with new functionality. Like Select2, Infinite Scroller, Bootstrap, and Angular has its own UI companion suite. Just check outhttp://ngmodules.org/.
7. Allow you to become proficient in a reasonable time
It took me around 2 full weeks to feel like I was proficient, where I was starting to pick out and understand best practices and look at some of the finer points of the framework. Where I started from is that I have a lot of experience developing with Javascript, jQuery, jQuery UI, and also implemented a project using Backbone.js earlier this year which is one of the other Javascript frameworks built to solve a similar type of solution as AngularJS. I felt like knowing how Backbone.js works helped a lot with picking up AngularJS.
Your decision might consider the additional lines of code added, worrying about if this may slow down your javascript execution, or page load times. You know you will also have a huge initial learning phase where you discover how to use, then try to learn best practices as you start to play around with implementing your app. Maybe you are concerned that it is just a fad framework too, there are other options for similar Javascript frameworks like Backbone.js, Knockout.js.
For most, I bet the initial learning phase and temporary slowdown in development is the primary hurdle. This can slow down a project that could be quickly done with existing technology. The long term benefit has to be there in order to spend your time learning and figuring out best practices, and ultimately the new piece of technology must be solving a problem in your software architecture to justify the time.
I found when researching AngularJS and going through the process of implementing an app with it, that it was going to be a great tool in making web applications. For a big list of criteria I recommend to evaluate when considering adding a new component to your web application, check out my article here titled 18 Questions to Ask Before Adding New Tech to your Web App. Here are some of the criteria from that list and how my evaluation of AngularJS went. It's my opinion that there is a significant hole in front-end web development that AngularJS fills.
1. Address some problems in your software architecture
When writing web applications, I have objects in the server-side code that often times aren’t represented as objects in the client-side code. For simple apps, this might be OK, but when it gets complicated, it can be a big help to mirror these objects on both sides. Also leads to a terminology issue, a Person object on the server can’t truly be talked about as a Person on the client side because it doesn’t look or feel the same way. Doesn’t have the same methods, isn’t represented as code, sometimes is stuffed into hidden inputs or in data attributes.
Managing this complexity can be very hard. AngularJS has ng-resource which you use to create services that hook up to REST APIs and return back that object in JSON and you can attach methods to that object so it can be a fully functional object. It feels more like something familiar to what you are working with on the server side. All without much work on your end, you have methods like save(), get(), update(), that map to REST API endpoints and are most likely the similar methods you might have in your Data Mapper on the server side.
AngularJS encourages you to also deal with models on the client side just like you have them on the server side, big plus there.
I also don’t feel like the design using jQuery + Mustache is elegant when it comes to having an object that has properties represented in different ways within the web UI. An example, you have a table of Person objects from the REST API, you have a button for each Person to denote they have “Accepted” an invitation, so when they click, you want the checkbox to change and you want the style on the row to change. In jQuery, you listen for the checkbox change event, then you toggle the class on the button and the row. In AngularJS, the model is the source of truth so you build everything from that.
See what I mean by taking a look at this jQuery vs. AngularJS plunker I created and compare the type of code you write.
2. Enable you to create software more quickly and with less effort
AngularJS having the ng-model and ng-class directives alone cover so many of the common operations that we all have been doing in jQuery. Two-way data binding and saving to the server now takes a small number of lines in AngularJS, but in jQuery would require creating your own object, and several different click and event handlers. Switching from watching elements and events to watching a model is a big shift in the right direction.
3. Result in software that is more maintainable
AngularJS encourages using the model as the source of truth, which starts to get you to also think object oriented design on the client-side. This allows you to keep in mind the same object-oriented design principles that in general make software more maintainable compared to procedural.
4. Improve the testability of your software
AngularJS has dependency injection at its core, which makes it easy to test. Even the documentation on the AngularJS site has testing as a part of every tutorial step, which almost makes it hard NOT to test.
5. Encourage good programming practices
Model as the source of truth, dependency injection, ability to create directives that can decorate elements that lends to reusable and shareable components, REST API connection to your server, lots of benefits from just following AngularJS basic usage.
6. Allow you to collaborate more easily with other people
Using models as the source of truth is something that is familiar with anybody who is doing object-oriented MVC server-side software, so this should make it easy to pick up for most web developers.
Also, being able to create directives in AngularJS and dependency injection makes it easy to create components that can be shared easily between developers and really has excited the developer community. Lots of existing projects have developed AngularJS directive bridge libraries so you can use their code by tossing an AngularJS directive to decorate an existing element with new functionality. Like Select2, Infinite Scroller, Bootstrap, and Angular has its own UI companion suite. Just check outhttp://ngmodules.org/.
7. Allow you to become proficient in a reasonable time
It took me around 2 full weeks to feel like I was proficient, where I was starting to pick out and understand best practices and look at some of the finer points of the framework. Where I started from is that I have a lot of experience developing with Javascript, jQuery, jQuery UI, and also implemented a project using Backbone.js earlier this year which is one of the other Javascript frameworks built to solve a similar type of solution as AngularJS. I felt like knowing how Backbone.js works helped a lot with picking up AngularJS.
Congratulations on your great site! Congratulations and good continuation!
ReplyDeletevoyance mail gratuit rapide