How hard can Angular 5 be?

Angular Firebase and Lighthouse

How hard can Angular 5 be?

Hey Angular Devs,

With 3 days of theory followed by a whole day of tutorials, I could finally come up with a basic version of my Angular 5 Application. It is a Simple Checklist in which you can add and delete your to-do’s , basically covering the CRUD operations.

AngularFire and AngularFirestore libraries do what they’re supposed to do and the best part was that, there was no hassle of a complex setup! 🙂

On the front-end side, using Angular CLI was pretty easy and quite handy to generate files and I loved how they used the elements of Ember CLI (Oh, I love Ember.js!)

I even wrote an alias for building the app in production mode and for deploying it to Firebase (yeah, call me lazy!) and called it ngfireDeploy (ngf TAB + ENTER and boom!).

Oh and did I mention I was building a PWA? I love PWA’s and I personally think they are going to outsmart the native apps. Talk about install-able web applications, push notifications, offline persistence of data and more importantly a native app like feel, bundled in smaller file sizes. What more could you ask for?

Lighthouse Score

Have a look at my Lighthouse score below to know how I am “progressing” with my Progressive Web App 😉

Lighthouse Score for Angular Checklist App

Lighthouse Score for Angular Checklist App

Yes, I am working on the optimization part 🙂 Going through this Udemy course to understand how the Browser consumes and parses the HTML, CSS and JS to finally paint those pixels. Does it not sound like magic? It did, for me before going through this course though!

Coming to data persistence, using the new Firestore queries were a breeze and relying on webpack to compile my SASS automatically was a real blessing. I am planning to use these more often now.

All in all, the learning curve for understanding the basic nitty gritties of Angular5 (and yes TypeScript) wasn’t that steep. May be this has to do with my familiarity with EmberJS.

As a bonus, I switched from Brackets to VS Code. Now I know why people use VS Code for Angular. 😀 (Although I have to admit, I did configure the keyboard shortcuts in VSCode to mimic that of Brackets.)

Few Fun Facts:

  1. Do you know LinkedIn uses EmberJS to fire up it’s UI?
  2. Turns out Angular CLI was directly borrowed “as-is” from Ember CLI. (Do not quote me on that, we already have enough framework wars! 😛 )

Anyway, have a look at my Simple Checklist app and let me know if there’s any feedback you want to provide or any suggestions you guys have to offer, to someone like me who has just begun his Angular Journey!

Till then, Keep Learning and Keep on Hacking! 🙂 (DevTips Fan, anyone?)


Share this post

Comments (2)

  • Hemant Reply

    Well written…
    Checklist app is excellent with Oauth integration i presume. I personally gave a try logging in and adding n deleting a todo item.
    And fun facts part, nice research

    October 6, 2018 at 7:28 PM
    • Nikhil Reply

      Thank you Hemanth. Appreciate the kind words! 😊

      October 6, 2018 at 8:48 PM

Leave a Reply

Your email address will not be published. Required fields are marked *