Learning Angular @ Kreitech

Here at Kreitech, we have a strong conviction that unified teams improve overall performance and work life quality. That’s why we try to share everything, and this time isn’t the exception.

After working with Angular in different projects for more than two years, Hebert and I decided it was a great opportunity to share our knowledge and experience in this amazing framework with our colleagues.  It also was beneficial for us, because as someone once said: “teaching is the best way to learn”.

For those that don’t know what Angular is, it’s a TypeScript-based open-source front-end web application platform led by the Angular Team at Google and by a community of individuals and corporations. Learn more at https://angular.io/

 

The workshop

The main idea was to develop a small application, all together, showing the benefits and tools that Angular has. But, before that, we wanted to have a solid background. Having these requirements in mind, we designed a 3-day workshop: the first one for all the theoretical stuff, and the remaining two for getting the hands dirty doing the coding side.

DAY 1.

We spent the first day showing what Angular is,  the pros and cons it has, comparing it with other popular front-end frameworks and libraries, such as React and Vue.js.

We also showed what Typescript is, what it has to do with this framework, explaining all the “magic” that happens behind the curtains when we compile our project, using tools such as angular-cli.

You can access the presentation here.

DAY 2 & 3.

With all the concepts fresh in our heads, we started the practical side of the workshop. It involved how to start an Angular project from scratch, explaining the purpose of every generated files.

The rest of the lesson implicated from easy concepts like one/two-way binding to how to embed components into others, using Input and Outputs or how to use services to communicate internally (between components) or externally (fetching resources from the web using the HttpClient).

Final Thoughts

This was a great experience either for us and for our coworkers. Luckily, the feedback was so good that we had the opportunity of repeating the workshop at a client facilities , obtaining positive comments as well.

You can see the result of this small and funny workshop in our bitbucket repository:

https://bitbucket.org/kreitechteam/angular_workshop

It includes an exhaustive ReadMe detailing all the steps we followed in order to achieve this result.

Would you like to see this workshop at your company? Drop us a line with your thoughts!