Category: Angular

AngularConnect a review

Recently I went to AngularConnect, this was my third time and probably my last (well for a while). The main problem with the conference this year was it just seemed like it was going through the motions. It seemed that there was nothing new and exciting in this years conference, maybe I’ve been to too many, maybe I was expecting more from the conference.

Last years conference was great. The new version of Angular was almost released, there was loads of great talks about the new and exciting version of Angular. This year we had version 5, with service workers and server side rendering. Both great features but not the biggest features ever.

I also found that some of the most interesting talks, one about NgRx and strategies in Server Side Rendering in Angular, both great talks, but they were only given 25 mins. These were just not long enough. I wanted to learn how to write better Angular apps, learn from the industry leaders on how to create great Angular apps.

Unfortunately I felt that I didn’t learn enough from the investment I made in going to the conference. These great developers come over, but weren’t given enough time to go into depth about Angular. There were some other talks that didn’t need to be there, they just seemed like fillers.

AngularConnect does offer a lot of other things, yoga sessions, meditation sessions, both great things, but I’ve never taken advantage of them. (I can go yoga classes outside of the conference). They also have office hours, what ever they are, and panels. But I’m not interested in those.

For me a conference should have talks from the best developers, great food and a place to sit down, eat and discuss the topics discussed in the conference.

Maybe I’ve been to too many AngularConnect in a row. A break from it might be in order. Next year I’ll watch the talks when they are online.

Loving Webstorm again

I’ve recently gone back to using Webstorm for my Angular development. I know that Visual Code is very popular at the moment, just look at any conference talks everyone is using VSCode.

So why have I gone back to Webstorm, well I have used is before and really liked it, but the immediacy of VSCode was really impressive, so I had to give it a go. But the other day I watched a great video by Victor Savkin, who was a developer on the Angular framework and now has his own consultancy Nrwl. In this video he shows how he uses Webstorm.

In the video Victor shows how he customizes the look of Webstorm using the Material UI theme, which can be installed via the Plugins section in Webstorm. I decided to give this a go to see what it looks like, and it looks good.

 

One reason I really like Webstorm is the number of features it comes with by default. While other IDEs have loads of plugins, which WS does have. It comes with so many built in features for example:

  • Support for a wide number of frameworks including Angular, React, Ember and even Vue
  • The Navigation and search features are fantastic. Watch the part of Victor’s talk where he shows how he uses bookmarks to navigate around the actual Angular framework
  • It had built in debugging support so you can step into your code within Webstorm
  • The code quality tools it has like ESLinting, TSLinting and JSCS all built in
  • The plugins you can install to enhance WS even more

The main drawback of Webstorm is that it is a paid application, unlike VSCode which is free. But I don’t see it as a drawback, because with a paid application you know they are going to be around for a while and are committed to the application you rely on so much. Also being funded means that JetBrains, the people behind Webstorm, have their own in house dev team who work on new features for WB.

So while there are other IDEs out there some of them free, but I love using Webstorm again. Here are some links to the articles about Victor’s talk on using Webstorm for Angular

  • Make Webstorm Better with these customisations
  • Using Webstorm for Building Angular Apps

Nice ngClass tip

This is a useful thing I found while working on a Angular project, making a small note here in case I come across the need for something like this again.

I’m working on a project where I have to loop through a list of items and display them in a table. Pretty straight forward stuff. One requirement is that if a row contains an item with a certain name, then a Class needs to be added to this row so the front-end developer can style this row differently.

After doing some research into this I found out that using ngClass this is really easy to do.

Using ngRepeat I looped through the data creating the table, then on each row using ngClass you can check the matching value like this:

Ng-class=“{‘className’: value === ‘titleToMatch’}

What’s happening here is if the value matches the titleToMatch then the className is applied to the row.

Ng-class is really flexibile and it’s well worth looking into what you can do with it.

Creating a Definition of Done

Today in our project planning sessions we discussed the idea of a Definition of Done. Now this is the first agile project I’ve worked on where we’ve actually defined what we, as a team, think a definition of done is.

As a developer I can really see the benefit that having a DoD set out from the beginning has. It gives us a checklist to go through when we have finished a task so we know that we can ‘officially’ say it’s done.

I think for 2 main reasons why the DoD is important for a developer, one that I can be happy to say that I have done/finished a tasks when I have met all the criteria that the DoD has set out. The second reason I think having a DoD is important for developers is that the quality of the project stays at a higher level as the project goes along.

If your Definition of Done says that a task can only be finish if it has 100% code coverage and has been checked over by a designer to make sure the work matches what they have designed. Then the quality of the project remains at a consistant high level, because you can’t say something is finished until all the quality checks have been made.

Review of my first AngularZone meetup

It was my first time at the new SkillsMatter premises and wow that place is amazing. It’s over 2 levels, level 1 has a large meeting room ideal for large meet-up groups and mini single track conferences. While on the lower level there is a slightly small room ideal for smaller second track sessions or large training sessions. There is also a few smaller training rooms. In the middle of all these lower rooms is a bar, table tennis and seats ideal for the social side of meet-ups.
The AngularZone meet-up had 3 talks, one by the main organiser on AngularZone all about the new features in Angular 2.1 (yep we’re on version 2.1 already, (Angular releases are like buses you wait ages for one to come then 2 come along at the same, we’ll nearly the same time). The new parts of Angular are simplified animations and better preloading of modules.
Lazy loading modules preLoader looks a great feature. I personally can’t wait to use it and see how it will improve sites.
The second talk was from Ari Lerner, who wrote the original ngBook and co-authored the new ngBook 2. His talk was really interesting, all about how he is using features of Angular 2 for intelligent A/B testing. If his talk is available to see after ngEurope it is well worth looking out for.
The final talk of the night was a quick tour through GraphQL. I have to admit I’ve never see it before this and I was really impressed. GraphQL will make a great backend for an Angular app.
I’m looking forward to the next AngularZone.

Directives in Angular

As part of my reading up on Angular, I’ve spent a bit of time looking at directives. These are my notes from what I’ve found out, mainly this post is for my own benefit.

– Four ways to clarify a directive

– Element =

– Attribute =

– Class =

– Comment = <!—directive:person —>

The restrict attribute in a directive will set what the directive can be loaded as

– E = Element

– A = Attribute

– C = Class

– M = Comment – These were setup as a way to get around the problem in early versions of Angular where the browser restricted how many directives could be created

Replace:true means that the template in a directive will replace the HTML element of the directive. So if a directive called contains a element with two input boxes for first name and last name. When the output HTML source is viewed the tag is replaced by the input fields.

Directives that manipulate the DOM usually use the link option to register DOM listeners as well as updating the DOM:

– The link function contains functions that effect the DOM

– Functions that can run against the $scope

– The link function takes in 3 scope, element, attr

– Link functions should have a $destroy event to clear up directives

Isolated scopes are defined in a Directive as scope: ‘=‘. An isolated scope is an object that is specific to that instance of a directive. So for example if you have a directive that has a template containing two input boxes that will show a list of users first names and last names. This directive allows the user to edit the names in a list. So each directive have access to its own scope and they aren’t all using the same scope object. You create an isolated scope so each version of the directive has it’s own scope.

All this information I found on the AngularJS site in the Developer Guide a great resource.

 

 

Scopes in Angular

I’ve been doing some reading up on AngularJS today to refresh my understanding of how it works. Today I was looking at Scope, here’s my notes on what I found out:

Scope has a lifecycle made up of 5 stages

  • Creation – when the root scope is created during the application bootstrap by the $injector service. During this process template linking takes part. Directives create child scopes.
  • Watcher registration – $watches are setup and used to propagate the model values to the DOM.
  • Model mutation – model mutation only happens when $apply is need when doing asynchronous work in controllers, or async work with services, like $http.
  • Mutation Observation – At the end of the $apply stage, Angular performs a $digest cycle on the root scope, which then goes through all the child scopes. During this stage all the $watches expressions or functions are checked for changes to the model and if a change has been detected, the $watch listener is called.
  • Scope destruction – When a child scope is no longer needed it needs to be destroyed. This is the responsibility of the child scope creator to do this using scope.$destroy(). This stops any propagation of $digest calls into the child scope and allow for the garbage collector to reclaim the memory.

So the way I see Angular works is, when your app starts the ng-app is a directive, and everything within that is then accessible to the Angular compiler which goes through the DOM and collects all the directives within the app. Then links all directives with a scope object to produce a live view of the model in these views. All this compilation is done in the browser unlike other templating systems that do this before rendering in the browser.

Once all these directives and scopes are linked, a series of $watches are setup all watching the expressions and functions within the scope(s). Any changes trigger the $watcher function, these $watch functions are triggered as part of the $digest cycle. When the $digest cycle starts it fires each of the watcher functions, which check to see if there is a different with the current model from the previous version of the model.

This is a great article on understanding Apply and Digest

There is still a lot more to Angular which I’m going still got to look into in further details. And how Angular 1.5 and it’s a new component structure effect how the scope and digest cycle works.

Any feedback on this would be really helpful

SyncHerts mobile development event

I went to my first SyncHerts event in a while. It was about mobile development, a favourite subject of mine, so I was keen to see what others in the local area are doing.

This was the second part of a 2 part event. In the first event people broke into teams and wrote user stories and made UI designs. In this the second part they needed developers to actually make these apps.

so again we split into teams and as the developer in the team I started making the app with Ionic. We only had 20-30 minutes before we had to demo to the other groups, which isn’t long enough to create a fully featured apps. But with the power of Ionic I was able to build an app that loads in a JSON file with a list of pizzas (it’s a pizza ordering app) then when you select on a pizza you get to see the full details of the pizza. Finally we added a Order button, so people could chose which one they wanted ordered for the next meet up.

We weren’t the only team using Ionic, another team had created a Ionic app that used a carousel to go from one pizza type to the next. Another team used Xamarin, and another team used Bootstrap with ASP MVC.

It was interesting to see how quickly people could get something together in such a small space of time. It was also interesting to see what technologies people would use.

I was impressed with how quickly you could build something that looked OK and worked using mobile web technologies like Ionic.  I was also able to load the app on my phone to demo using Ionic View.

I might add to the app and get it on GitHub

 

Review of AngularConnect

At the end of October I went to AngularConnect a massive Angular conference, the biggest conference I’ve ever been to.

The first day of the conference was a series of workshops about Angular 2, Angular 1 and Ionic. I went to the Ionic workshop, which was all about Ionic 2.  It was a great workshop, using the new alpha of Ionic 2. This was my first exposure to Ionic and Angular 2 along with TypeScript.

Like a lot of people I’ve seen the slides from the ng-conf presentation where scope and controllers were both declared dead in Angular 2. So I was interested in seeing how the new version was structured.

Getting to work with Ionic 2 in the workshop gave me a great introduction to both TypeScript and the component based structure of Angular.

That was the Monday, then on the Tuesday the conference started proper. First off was the keynote by Brad Green. I like everyone else was hoping that the alpha of Angular 2 was going to be announced, but it was (though I’m sure it’s close). The keynote was great, full of details about Angular, the Angular eco-system and the performance gains that are coming with Angular 2, really it can’t come quick enough.

Here’s a list of the talks I went:

  • Building cross-platform apps with Ionic 2
  • Routing in Eleven Dimension with Component Router
  • Full Stack Angular 2
  • Extreme programming in a Nutshell
  • Getting Started in Angular 2
  • Building native mobile apps with NativeScript
  • These are not the models you’re looking for
  • TypeScript tooling for greater productivity
  • Building performant components
  • Creating realtime apps with Angular 2 and Meteor
  • Using web workers for more responsive apps
  • How to design large scale AngularJS applications that scale
  • Optimise Yourself

So there was quite a lot of talks, thankfully everything was recorded and the videos are available to see on YouTube. So do yourself a favour go watch the YouTube channel and go next year

Bower or NPM

I’ve been trying to chose between Bower or NPM as the tool I’m using for installing libraries. After using both for a little while I’m going to use Bower.

The main reason for this is because Bower is more for ‘front-end’ work, while I see NPM as more of a Node library loader. For me as a front-end developer I use Bower to get all the libraries I need for a project, for example AngularJS, Bootstrap and Gulp.

I see NPM as more of a tool for creating and managing your Node projects. As my experience using Node/ExpressJS grows I’ll probably use NPM a lot more.

But for me both package managers are a fantastic, when I look back at when I started building websites and I had to find, download, unzip, copy over to my folder, update the links in my HTML, all to install jQuery. So now we as web developers are lucky to have tools like Bower and NPM.