Angular - 4 year road map
AngularJS is one of the most popular JavaScript frameworks in the web. The Google developed framework is considered as one of the easiest framework to kick start a project. Two way binding and the dependency injection is the highlight of this framework.
My journey with AngularJS started about 4 years ago. Then popular ver1.4 amazed me in its capabilities. Developer like me, coming from Actionscript and plain old JQuery , AngularJS is a good option to kick start a project. It give me the confidence in JavaScript world, and from then I have tried lot of framework and tools from JavaScript itself like requireJS, webpack, etc. I did projects in Angular from 1.4 to the current 2.0, and trying to upgrade to the latest 4. Angular has now become one of the fastest growing framework. The journey starts with 1.4
One of the stable and mostly uses version. Started working on this for small projects and it seems easy for development. Dependency injection and two way binding seems quite interesting. Routing is another point seems to be quite interesting when we need complex projects. Route resolve where life saver for many times.
Till then everything seems right and going well. Problems surfaced when started to use for complex and large projects. First problem is loading files. The third party modules need to loaded initially and even a simple login page needs minutes to load. After googling we found requireJS. Though it seemed difficult to setup , it’s a life saver compared to old. But it’s time consuming and its not that easy to develop. Even if it helped to solve our problem, it’s not a good solution. After lot of search we found oclazyload. It’s a great library which works inside the angular scope. On the other hand requireJS worked outside the angular scope. It’s just a module loader.
Meantime we are in search of a cleaner solution. And found out webpack. An amazing tool which let’s to build , minify, and bundle the code. The application become more faster than anything we tried before. Also it helped to write styles in SaSS as well in CSS. It’s easy to divide style for each module . You could found out the solution here.
Angular 2.
Here comes the major change in angular development. In built lazy loading of modules, bundling, view encapsulation and large performance update from the previous versions. First it seems like a life saver. No it’s almost life saver. Lazy loading modules, which is pain in AngularJS now became easy. Styling is always a trouble especially between designer and developer. View encapsulation helped a lot in customising the styles. We already feel the power of webpack in our AngularJS + webpack
Angular/cli made development easy and faster. It provided a good boilerplate for development. Angular come with two types of compilation. JIT(Just in Time) and AOT (Ahead of Time). In JIt the code compiles in client side. And in AOT it compiles in the development system itself. But the major difference i found is, in JIT the bundle size of main file is bigger and module bundles were small. In AOT the main bundle is less and module bundles were big. Even though its better to compile using AOT for production. That’s our first concerns over it. Once our project become bigger and bigger we have divide it to small modules so to keep it low bundle size. Still we though the size were bigger. Yes it is. Its one of the major problem of Angular 2.
Other thing that bothered is , the rapid version changes. We started working on beta version and it had lot of breaking changes in each new versions. Literally we had to update the project to the latest in every week.We had to spent hours to figure out the bugs and fixes. But it’s a good learning experience. Once we hit final versions here comes Angular4. OMG! Do we need to rewrite the whole code ?
Hold on. There is not much change from 2 to 4 . One of the major change is the separation of animation package. That’s okay. Another is new view engine. Yes we got stuck there. Since our project built on cli-beta15 and its in cli-1.0rc4, the new template is big problem. We are extensively using the template tag and the way ngIf and ngFor used inside these template changed. Also template in now ng-template.
Okay. Its code change. But not more. Thanks. Then whats the major change in Angular4 . It’s performance change and bundle size. Bundle size is bigger concern for our project in Angular2 especially after AOT and tree shaking. So what about the bundle size. Here is the difference between same project in different versions.
Angular4 build
That’s a big difference right? Yes it is. For performance that i still need to test.
So whats the point? Angular still reigns. Yes, its one of the best JavaScript framework available right now. You could count on this frameworks. That’s my 4 years of experience in Angular says.
My journey with AngularJS started about 4 years ago. Then popular ver1.4 amazed me in its capabilities. Developer like me, coming from Actionscript and plain old JQuery , AngularJS is a good option to kick start a project. It give me the confidence in JavaScript world, and from then I have tried lot of framework and tools from JavaScript itself like requireJS, webpack, etc. I did projects in Angular from 1.4 to the current 2.0, and trying to upgrade to the latest 4. Angular has now become one of the fastest growing framework. The journey starts with 1.4
One of the stable and mostly uses version. Started working on this for small projects and it seems easy for development. Dependency injection and two way binding seems quite interesting. Routing is another point seems to be quite interesting when we need complex projects. Route resolve where life saver for many times.
Till then everything seems right and going well. Problems surfaced when started to use for complex and large projects. First problem is loading files. The third party modules need to loaded initially and even a simple login page needs minutes to load. After googling we found requireJS. Though it seemed difficult to setup , it’s a life saver compared to old. But it’s time consuming and its not that easy to develop. Even if it helped to solve our problem, it’s not a good solution. After lot of search we found oclazyload. It’s a great library which works inside the angular scope. On the other hand requireJS worked outside the angular scope. It’s just a module loader.
Meantime we are in search of a cleaner solution. And found out webpack. An amazing tool which let’s to build , minify, and bundle the code. The application become more faster than anything we tried before. Also it helped to write styles in SaSS as well in CSS. It’s easy to divide style for each module . You could found out the solution here.
Angular 2.
Here comes the major change in angular development. In built lazy loading of modules, bundling, view encapsulation and large performance update from the previous versions. First it seems like a life saver. No it’s almost life saver. Lazy loading modules, which is pain in AngularJS now became easy. Styling is always a trouble especially between designer and developer. View encapsulation helped a lot in customising the styles. We already feel the power of webpack in our AngularJS + webpack
Angular/cli made development easy and faster. It provided a good boilerplate for development. Angular come with two types of compilation. JIT(Just in Time) and AOT (Ahead of Time). In JIt the code compiles in client side. And in AOT it compiles in the development system itself. But the major difference i found is, in JIT the bundle size of main file is bigger and module bundles were small. In AOT the main bundle is less and module bundles were big. Even though its better to compile using AOT for production. That’s our first concerns over it. Once our project become bigger and bigger we have divide it to small modules so to keep it low bundle size. Still we though the size were bigger. Yes it is. Its one of the major problem of Angular 2.
Other thing that bothered is , the rapid version changes. We started working on beta version and it had lot of breaking changes in each new versions. Literally we had to update the project to the latest in every week.We had to spent hours to figure out the bugs and fixes. But it’s a good learning experience. Once we hit final versions here comes Angular4. OMG! Do we need to rewrite the whole code ?
Hold on. There is not much change from 2 to 4 . One of the major change is the separation of animation package. That’s okay. Another is new view engine. Yes we got stuck there. Since our project built on cli-beta15 and its in cli-1.0rc4, the new template is big problem. We are extensively using the template tag and the way ngIf and ngFor used inside these template changed. Also template in now ng-template.
Okay. Its code change. But not more. Thanks. Then whats the major change in Angular4 . It’s performance change and bundle size. Bundle size is bigger concern for our project in Angular2 especially after AOT and tree shaking. So what about the bundle size. Here is the difference between same project in different versions.
Angular4 build
That’s a big difference right? Yes it is. For performance that i still need to test.
So whats the point? Angular still reigns. Yes, its one of the best JavaScript framework available right now. You could count on this frameworks. That’s my 4 years of experience in Angular says.
Comments