CmlKVnLWAAA3_Zu.jpg-large
Last 1, 2 y 3 of July, 2016 I was lucky to go to Angular Camp 2016. There, I enjoyed a series of conferences, workshops and talks related to Angular, in the beatiful city of Barcelona.

First things first: thanks to my bosses at Grupo ASV. They saw this opportunity as interesting as me, and helped me a lot to go to the camp.

After realising that being away from your wife and daughter is tougher than imagined and having some problems with Vueling Airlines (I wasn’t the only one), I finally got to the hotel at 2:30 am. Luckily, it was so close to the event’s headquarters: Disseny Hub and Parc de les Humanitats i les Ciències Socials de Barcelona.

Day 1: Conferences

First day was conferences day, where we could se all ng-superstars in action. The “show” began after a welcome message from the organizers, David Pich and Johannes Weber.

From .component() to @Component

Todd Motto was in charge of opening the conferences. He gave us some comments on the component element on AngularJS and Angular2, promoting the use of components over directives for the people who still develop on AngularJS (like me). Here we could start taking the first keywords, like smart & dumb components or tending to one-way binding so we could start doing things à la Angular2.

The talk was based on this post from his blog.

Angular Material 2: Reward your app with high-quality UI in minutes

Maxim Salnikov gave us an overview of Angular Material 2 (still in alpha). I’ve never been the greatest fan of Material Design, but I’ve changed my mind since then. Actually I’m develping a personal project with AngularMaterial. It was a pity Maxim got a bit nervous during his presentation. However, I admire the great effort made in terms of accesibility.

The slides of Maxim’s presentation are available on this link.

Angular 2 Server Side Rendering

Wassim Chegham gave us this talk. Yes! Server-side Angular Rendering! Bye bye, SEO-related issues. Bye bye, blank pages until the first JS is loaded. Hello, Angular Universal!. They also are promising this technology will get to several platforms, not only node.js ecosystems. So I’m looking forward for its arrival to the Java platform.

The slides of the presentation are available here.

Sharing Code Between Web and Native Apps

It was turn for Sebastian Witalec and his tak about NativeScript. A technology that goes beyond we can do with Cordova. Here, Angular’s default rendering engine is substituted by a custom one that allow us to develop applications that run native components on iOS and Android devices (and web, of course). NativeScript also gives us the ability to create wrappers for existing components (any cocoa pods or android component) and use them in our applications.

Here we have the slides of Sebastian’s presentation.

Building Angular 2 Application with Redux

Evan Schultz gave us a review of Redux. I’ve been interested on this state container for a long time. After a better understanding of the problem Redux tries to solve I find it’s something vital for medium to large scale applications.

Redux is intimately related to the smart & dumb components concept, and the use of immutables. Only smart components communicate with actions, and the store is an immutable object. Despite we can play with immutables with no help, Facebook’s Immutable library is the recommended option.

The use of immutables enhances our AngularJS and Angular 2 applications performance. We only have to compare references to objects instead a deep object comparing.

We have some libraries to facilitate the integration between Redux and our AngularJS or Angular 2 components.

After Evan’s talk I saw this video about integrating Angular with Redux through the module ngRedux. It’s simple but helped me to understand some concepts:

Angular 2.0 with realtime GraphQL

Uri Goldsthein (a.k.a. ngJesus) gave us a presentation about GraphQL. Since then I thought it was a Facebook-only thing. The concept looks interesting, but I think it doesn’t fit in my next projects.

TypeScript fundamentals

In the next presentation, Christoffer Noring talked about TypeScript. We can download it here.

Last part of the presentation was quite interesting because he showed us how to declare AngularJS components with TypeScript.

From the World-Wide Web to the World of IoT

Uri Shaked left one of the best talks of the day behind him. He showed us a tipo Simon-like Angular 2 application. It exposed its interface through a web application and also through phisical buttons connected to a Raspberry Pi. The source code of his demo is available on this link.

Uri is so involved in IoT issues an is the maintainer of the angular2-iot project.

Next day we could see him in action:

  • Moving a robot through an Angular app that made use of Chrome mobile’s bluetooth API. It was an open hardware robot made of 3D printed pieces.
  • Interacting with this light bulb thanks to its bluetooth interface.

Progressive Web Apps with Angular 2

Manfred Steyer was the hero of the Camp (in my opinion). He gave us a great conference, and lots of talks during the next days. Despite being essentially theoretical, everything he explained was followed by a demo. With PWAs (Progressive Web Apps) we saw how to install web applications in our Android devices with pre-cached elements for an immediate load and the ability to send push notifications to the browser. Also, they work great while offline and get updated when return back online. With this paradigm, web applications get so close to native apps.

Click here to get to the slides. The source code for the examples is here.

Angular 2 super-charged: Native desktop power with Electron

Electron has been a very attractive technology for me during a long time. It allows us to create desktop applications using web technologies for the presentation layer. It also gives us all the power of node.js for the application logic, and its ability to communicate with the operating system. Thorsten Hans was in charge of the presentation. And the source code is available in GitHub.

Augury

Vanessa Yuen introduced us Augury. She convinced us to use this (still in beta) developers tool. Augury can be for Angular2 more than Batarang was for AngularJS.

Closing keynote & group picture

Finally, David and Johannes gave us a brief thank you speech and we made the family picture you can see in the head of this post (and some selfies).

Days 2 and 3: Camp

Saturday and Sunday held talks and workshops. We voted amongst lots of topics. From the results, a calendar with simultaneous talks in three rooms was developed.

AppVerse generators

Carlos Rubio announced us the yeoman generators they use for application development. I would like to remark the HTML5 Generator. Looks impressive and I’m thinking on making a fork to create something from it.

Desarrollo por componentes con Angular 1.5 y ES6/ES2015

Carlos Azaustre imparted a workshop where he developed an AngularJS 1.5.6 app. Making an extensive use of the component, following Todd Motto’s style guide and with a bit of materialize, he created a cool ES6 app. Sources here.

On his blog he published a more detailed article.

Creating a mobile app using Angular2 and Ionic2

This presentation from Rodrigo Cabello and Carlos Landeras consisted of a summary of the state of the art of hybrid mobile apps. After this, they made an introduction to Ionic 2 and its ecosystem. Then, they made a demo of an Ionic 2 hybrid application. The source code can be downloaded from GitHub.

Create a Spotify song player app using Angular 1.x, TypeScript & Yeoman

Jeff Arese made use of yeoman’s ng-poly generator to create a player based on Spotify’s API. Jeff used Angular Material for the presentation layer. At this point, I was enjoying Material Design a bit more.

The sources of the application are available on GitHub.

Building a MVP with Angular 2, Polymer & Firebase

I could’t assist to Michael Prentice‘s talk. Firebase is another technology to follow up closely. Even more since Google acquired them.

There are components to integrate Firebase with AngularJS and Angular 2. What I didn’t know is that Polymer gets on well with Angular 2 thanks to angular2-polymer.

We can see his presentation and the source code he worked on.

DevOps & Angular 2

Adrián Ferreres gave us this presentation. I could extract some interesting keywords from it.

Angular 2 & Firebase in Action

The twins David and Rubén Chavarri gave a nice presentation. But it was nothing compared to the pictionary-like application they created. We can play it here, or check the source code.

ngSlice

Attila Oláh made an introduction to ngSlice. It is a tool that helps us to turn our mockups into a skeleton of a component-based Angular application. It can be very useful in our first projects to achieve a better project structure. It’s still in beta, and they accept all kinds of suggestions.

Modern authentication with Angular 2, OAuth 2 and OpenIDConnect

Turn for Manfred. The omnipresent. Three talks of the highest level. Making things so clear. The first one was about the use of the most commonly used authentication mechanisms. Here we have the slides, and here the source code.

Databinding and performance in Angular 2

Continuing with Manfred. On this presentation he gave an overview of how Angular 2’s databinding worked and showed us some tweaks to get a better performance in our applications. He had prepared a couple of scenarios: one with immutables and the other one with immutables and observables.

Angular 2’s new newest Router

In his latest presentation, Manfred Steyer told us about the state of Angular 2’s router manager. The last version. Not that version. The other latest. I find the deprecated one more useful than the current. It included some elements that made it a good tool (path aliases, decentralized rouing…). But it seems that the latest version is closer to ngRouter than uiRouter. Let’s see how all this ends.

The source code for this presentation is avaliable here.

ngMetadata

Martin Hochel gave us a talk about ngMetadata. It’s a set of AngularJS decorators that allow us to develop our applications the same way we do in Angular 2.

Angular2 & NativeScript. App to control a Robot.

Some of the members of the ngBraves team (José Manuel García, Víctor Ocariz, Fernando Martín, Pablo Pérez and Adrián Ferreres) gave us talk of how to control a Mip Robot. Using NativeScript we can create a multiplatform app and control the robot throught the BTE interface (Bluetooth Low Energy). I highly recommend taking a look to the slides and the source code. There are some videos on twitter:

Code reuse between web, mobile native and server side

Through this projectPau Martínez  and his coworker Omar showed us how to create a NativeScript application in three flavors: Web, iOS and Android. After the workshop I could have a chat with Pau about the best way to approach to these kind of projects.

GraphQL Q&A

Continuing with his talk of the previous day, Uri made a Q&A session. He mentioned some must-see talks to delve into GraphQL:

Working with interceptors in Angular 2

Despite the concept of AngularJS’ interceptors has been lost on Angular 2, Víctor Olivas’ source code shows us how to extend the HTTP service to use them again.

Contributing to Angular core

David Rodenas offered us an outline on how to contribute with code or documentation to Angular’s core.

Conclusions

There are some presentations and source code I couldn’t get. When I get them I promise I will complete this article.

The stay at the AngularCamp has been quite profitable. I’ve known knowing new things and passionate people, I have been able to keep an eye of what is to come. Also, I have seen some improvements to apply in my current projects.

I hope I can return next year.

Anuncios