barbarianmeetscoding

hackerz edition

A Brief Update on Angular 2

| Comments

Last week I watched a very interesting Pluralsight webinar where Joe Eames introduced Angular 2 and I wanted to share what I learned from it with you.

A couple (or four) weeks ago Angular 2 went into developer preview with a beautiful brand new documentation and distributions that you can start playing with today. I hadn’t even looked at it to be honest, busy with other stuff, but I had kept my ear out for news and when pluralsight announced a webinar on the topic I thought it was the perfect time to find out more.

This is what I learned:

Angular 2 is in a very early stage of the developer preview, very unstable and it is constantly changing not only in the form and shape of the API but also in its core concepts and naming.

With Angular 2 you get everything you know and love from Angular 1 with a highly improved performance, a simpler mental model with fewer moving pieces and better access to the DOM.

You can build Angular 2 applications in plain ES5 JavaScript but you also have the option to use transpilers and write your angular 2 apps with TypeScript, ES6/ES7 (traceur, babel…), CoffeeScript, etc.

The whole development story changes from using a standard MVC approach to a more componetized development where you have independent components and each has its template and underlying view model (like in aurelia). The components themselves are just ES6 classes that expose APIs to be bound to templates (no more $scope variable).

Angular 2 uses ES7 decorators to provide metadata to your components. They work sort of like attributes in C#. If you use ES5 to write your angular apps there’s alternative APIs to define this metadata. This is an example of a component from Joe Eames’ code sample on GitHub that can give you an idea about how the new component model looks like:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// ES 6 module imports
import {Component, View, For, If, EventEmitter} from 'angular2/angular2';
import {Inject, bind} from 'angular2/di';
import {todoItems} from 'services/todoItems';

// component metadata (element and dependencies to inject)
@Component({
    selector: 'todo-list',
  injectables: [bind('todoItems').toValue(todoItems) ]
})
// view metadata (template and used directives)
@View({
    templateUrl: 'components/todo-list.html',
    directives: [For, If]
})
// an ES6 class
export class TodoList {
  constructor(@Inject('todoItems') todoItems) {
        this.items = todoItems;
    }
    setCompleted(item, checked) {
        item.completed = checked;
    }
    completeAll() {
    var that = this;
        this.items.forEach(function(item) {
            that.setCompleted(item, true);
        });
    }
    removeItem(item) {
        this.items.splice(this.items.indexOf(item), 1);
    }
}

There is some interesting new notation for writing bindings within the html templates (*for instead of ng-repeat, *if instead of ng-if, binding with [attribute] and (event):

1
2
3
4
5
6
7
8
<div style="margin-bottom:10px">
    <h1>To Do</h1>
    <div style="padding:5px" *for="var item of items">
            <input type="checkbox" #chkbox [checked]="item.completed" (click)="setCompleted(item, chkbox.value)">
             <a class="glyphicon glyphicon-remove" (click)="removeItem(item)"></a>
    </div>
    <button *if="items.length > 1" class="btn btn-xs btn-warning" (click)="completeAll()">Complete All</button>
</div>

The IoC story looks like is more explicit and less convention-over-configuration based although I have no clue how it will look in the final version:

1
2
3
4
5
6
7
8
9
10
// extract from previous example with IoC fragments
@Component({
  injectables: [bind('todoItems').toValue(todoItems) ]
})
// an ES6 class
export class TodoList {
  constructor(@Inject('todoItems') todoItems) {
        this.items = todoItems;
    }
//...

You can start testing the developer preview by downloading the source code at code.angularjs.org (look for the 2.0.x and alphas). In terms of good editor support, there is sublime text that has great plugins for ES6 and ES7, Web Storm, and even Visual Studio Code or Visual Studio if you want to try Angular 2 with TypeScript.

Watch the full webinar with much more interesting information and examplesin youtube:

And here you have the announcement of Angular 2 at ng-conf 2015:

I don’t know why people were so jumpy about breaking changes, this is looking gooood! Hope you enyojed the article! Have a nice day! :)

References

For more information about Angular 2 take a look at:

Mastering the Arcane Art of JavaScript-mancy for C# Developers - Chapter 4: More Useful Function Patterns - Multiple Arguments

| Comments

The Mastering the Arcane Art of JavaScript-mancy series are my humble attempt at bringing my love for JavaScript to all other C# developers that haven’t yet discovered how awesome this language and its whole ecosystem are.

Time for some more useful function patterns in JavaScript!

In this article I’ll show you how to handle multiple parameters – the equivalent to params in C# – in the current version on JavaScript (ES5) and in the upcoming ECMAScript 2015 that brings great support for multiple parameters with the rest parameter syntax.

JavaScript-Mancer Level 90

Mastering the Arcane Art of JavaScript-mancy for C Sharp Developers - Chapter 3: Useful Function Patterns - Default Arguments

| Comments

The Mastering the Arcane Art of JavaScript-mancy series are my humble attempt at bringing my love for JavaScript to all other C# developers that haven’t yet discovered how awesome this language and its whole ecosystem are.

In the next few articles of the javascript-mancy series I will detail several patterns you can use in JavaScript to achieve default arguments, multiple arguments and function overloading.

We’ll start with how to use default arguments and values in JavaScript both with the current version on JavaScript (ES5) and the upcoming ECMAScript 2015 that brings native support for defaults.

JavaScript-Mancy

Barbaric Tip of the Week: Saving Your Session for Later in Vim

| Comments

Barbaric Tip of the Week is a weekly series whose main purpose is to share tiny bits of knowledge that I find specially useful and interesting.

I started my machine, opened the command line, ran vim and opened my weekly planning, project notes and overall work checklist as I usually do, in the exact window configuration that I usually use, which my weekly planning window on the left, and job checklist and project notes stacked on the right. Everything was the exactly the same as the previous 999 times, everything but for one thing, this time a thought sprang to my mind: Wouldn’t it be awesome if I could save this file/window configuration and just load it at all once?

Well… That was about time… there is indeed a way to do that… :)

You can save your complete session in vim, that is, the files you have opened with the specific windows or tab configurations that you’re using, with the :mksession command:

1
:mksession ~/jobsession.vim

Later, the next time you open vim you can load that session with :source:

1
:source ~/jobsession.vim

Or alternatively open vim directly with a specific session by using the -S option:

1
> gvim -S ~/jobsession.vim

Voilá! Enjoy!

Bonus tip: Did you know that you can also resize windows with the :resize command? You can use :vertical resize <numberOfLines> to resize a window’s width, and :resize <numberOfLines> to resize its height. Cool right?

Mastering the Arcane Art of JavaScript-Mancy for C# Developers - Chapter 2: The Basics of JavaScript Functions

| Comments

The Mastering the Arcane Art of JavaScript-mancy series are my humble attempt at bringing my love for JavaScript to all other C# developers that haven’t yet discovered how awesome this language and its whole ecosystem are.

Functions are the most foundational building block in JavaScript. Not only do they hold the logic of our applications, they also are the primitives upon which we build other programmatic constructs in JavaScript like classes and modules.

JavaScript provides different ways to declare and use functions, each with their own nuances and limitations, so given that they are such a fundamental part of the language it is important that you are aware of these characteristics when you are writing JavaScript applications.

Welcome to another step in your journey to JavaScript mastery! Let’s get started!

JavaScript-Mancy

Mastering the Arcane Art of JavaScript-mancy for C# Developers - Chapter 1: The Many a One JavaScript Quirks

| Comments

The Mastering the Arcane Art of JavaScript-mancy series are my humble attempt at bringing my love for JavaScript to all other C# developers that haven’t yet discovered how awesome this language and its whole ecosystem are.

For many years has JavaScript been frown upon and look down on by many developers due to its quirky nature, obscure behaviors and many a one WTFs that populate its hairy APIs and operations.

Frown upon no more! For with modern design patterns, libraries, tools and the long awaited JavaScript 6 Harmony (ES6, ES2015) writing JavaScript is now a pleasure.

Join me at the school of JavaScript-mancy as we travel along the modern landscape of writing JavaScript in 2015 and beyond, as we discover the organic evolution of this beautiful language and its thriving ecosystem, and delve in the latest features/spells/incantations of the JavaScript Arcana.

A Brief Guide on How to Pass the 70-480 Certification Exam

| Comments

A couple of weeks I did my first certification exam ever and I passed! Wihoo! I thought that you who are planning on taking this or any other certification exam could maybe find my experience of value and thus here we are. :)

I approached the whole exam thing mainly as an excuse to learn and refresh my knowledge in web development, starting from the very basics to the more advanced APIs that I hadn’t had the chance to look into, trying to fill in all the gaps that I felt I have had in my web dev knowledge in the past. So this is not going to be an article on how to pass the exam with the least amount of effort possible, no tricks or shortcuts, it is just going to be an article about how I went about preparing for the exam, just plain old studying, practicing, coding, learning and writing a freaking exam XD.

Barbaric Basics: Building Flexible Layouts With Flexbox

| Comments

With Barbaric Basics I brush up on basic techniques, practices and APIs. Come along and get them refreshed you too. Who knows? You may even learn something new!

Today we live in a world of many devices, many resolutions, many form factors and as such it is more challenging than ever to build websites that provide an awesome experience in all of these different and ever-changing conditions.

Fortunately, HTML5 brings with it a couple of new techniques that let us developers create flexible layouts with less hassle than ever before: flexbox and grid. I have created a tutorial/walkthrough that I hope will get help you start getting acquainted with Flexbox, the most mature of these two new layout systems. I hope you’ll enjoy it!

To Flexbox Tutorial

Flexbox is a stable standard and is supported by all modern browsers (>IE10), so there’s no reason not to start using it today.

And here are some additional references if you want to learn some more!

Barbaric Basics: Web Workers

| Comments

With Barbaric Basics I brush up on basic techniques, practices and APIs. Come along and get them refreshed you too. Who knows? You may even learn something new!

So in something like a couple of weeks I am going to be taking my first ever Microsoft certification exam! I am going to start with the 70-480: Programming HTML5 with JavaScript and CSS3 and get my way through all the web development stack. A certification? – you may ask yourself – Do you even need that? Is it worth anything?

And This Was Swetugg on Day 2

| Comments

And it was a wrap-up for Swetugg the Swedish conference for .NET developers by .NET developers.

Swetugg

tl;dr; Great second and last day at the conference with more interesting talks on BDD, specification by examples, Conway’s Law, Polyglot programming and persistence, event sourcing, graph databases, document databases, Entrepreneurship, Lambdas, UX magic, EPiServer and Game Development backed on Azure.