Premium Economy Software


Singapore
Perth W Australia

Angular 2 : Test Drive

September 6, 2016 Uncategorized 0 comments

Here we go

I had a brief trial of Angular 1 and built a simple routing website. Liked the style, but I felt it feeling very script like with a very past together routing system and a bunch of function and features throw together. It was sort of HTML with Js power up.

TS I Love You….

The first thing I realized is that it’s written in something called Type Script.

Type Script is Javascript powered up… or more strict. It adds those pop out features when you use your program developer software.

Snazzy… but I’ll go with it.

Think of it like SPELL CHECK. You Type a sentence like.  ‘john went to market’ in Type Script and it will compile a new file with ‘John went to the market.’ with everything corrected and strict. Type script is a lot shorter. It uses JAVA style ideas like import and @.

 

typings.json ...

Split Up

The next thing I realized is that the package is split up into different files. Nothing unusual, as programs get bigger and functionality increases you want to separate the code so that its clean.

The one thing that comes up is this idea of ‘Components’. Basically thing of them as ‘Reusable Blocks of Code’ That’s exactly what they are. Called something sexy called Components.

One good thing about Component is that you can open 1 and fix it without bothering about the entire system. In fact, other people can build a component and you can simply use it, saving time developing.

There’s something called Modules, which is a class that holds components. And finally there’s the Main which just loads that Module with some configs.

Components —-> Modules —–> Main

 

I think of the Main and the index.php with some global gobal stuff. No configuration here for the modules.

Module loads all the components, the custom one and whether its mobile / browser or whatever. Offers some basic configuration here.

Component is your custom module

 

 

 

Deja Vu!!!

Something is familiar here. This feels like…. Yii2 framework. Except. You have object modular programming design. What’s so hard. All they did was call everything a different name. Instead of private vs public, you declare a class ‘export’ ready.

 

 

 

Customize My Sandwich

There a lot more configurations going on. This means you can add or remove different components. Example, Sandwich = import cheese, tomato, ham.

I’ve just learnt that this process in coding is call Bootstrapping. Meaning, use only what you really need. This is not to be confused with Bootstrap CSS framework.

The good news in bootstrapping is that since it does not load things you do not need, its more efficient. a sandwhich without cheese instead of putting cheese in and then trying to remove it.

 

Imagine if we didn’t want Ham. The previous version was a little more junky where you put it into the so called Controller. Now its loaded on the ‘component level’.

To-mah-o or is it To-meh-to

ES5, ES6, ES2016. These are basically Javascript language versions. The reason why they are now included is that previously JS was boring. But with apps, Javascript is now hot and they need newer versions with new features to cater to the language.

Let’s take a look at the HTML index.html main page.

<html>
<head>
<title>Angular 2 QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>

Check this out!

 

<script src="node_modules/core-js/client/shim.min.js"></script>

This means load ES6 “shim” javascipt language monkey class. I imagine it’s some sort of monkey that goes and fixes your code so it works with old browsers…. Who knows right?

Ok Next Zone Me In

<script src="node_modules/zone.js/dist/zone.js"></script>

Checking out the Git.

A Zone is an execution context that persists across async tasks. You can think of it as thread-local storage for JavaScript VMs.

Ok WTF….

Execution Context. … Like A THING THINGY?

Let’s see what I know. Async means ‘at the same time’ in my idiot guide language.

Alright, after spending 10 minutes watching the video of Brian Ford, this is my idiot version of how it works.

Imagine you are in a time zone in New York and you opened a bottle of coke. Then immediately you were beamed to San Francisco where you played Pokemon Go. 1 hour later, you’re beamed back to pour that can of coke into a glass.

Now what the zone thing sort of does is answer the question, “What did you do in the New York Time Zone.” It allows the capturing of all events in a time zone. Otherwise, all you see is “Pour Can of Coke” which would be the answer of ‘What did you do in New York Time Zone when you got there.”

Yeah, I know I don’t quite understand this myself but I’m not going to be zoned out!

Reflect on Me!

<script src="node_modules/reflect-metadata/Reflect.js"></script>

Ok, what reflect does is make things easy to read. I found this on stack overflow

This is what ES6 looks like.

@Component({selector: "thingy"})
@View({template: "<div><h1>Hello everyone</h1></div>"})
class Thingy{};

And this is without Reflect ES 2015

function Thingy(){} Thingy.annotations = [ new angular.ComponentAnnotation
({ selector: "thingy" }), new angular.ViewAnnotation({ template: "<div><h1>Hello everyone</h1></div>" }) ];

Man that’s ugly.

What you’re looking at is replacing the who object loading declaration thing with the @ symbol. In idiots language its like adding a new command “fetch stick” . Instead of 1) Look for stick as dog 2) Run forward with left and right leg 3) Open mouth. 4) Mouth.Open.stick etc etc. Get the point.

I like this one.

What a LOAD!

Finally

<script src="node_modules/systemjs/dist/system.src.js"></script>

This System SRC is a class that loads all versions of JS. With so many people building so many things, you are bound to have different versions or styles or whatever. I think of it as a NPM but for javascript and on run time. So you basically feed it some variables and it will go and load it onto your application.

And wah la!

<script src="systemjs.config.js"></script>

Which is the load file that does the loading. This is a bunch of bundles, that gets loaded. Remember when I said it’s much split up, this is it. Among the core you can load all these bundles. Finally we are at the end!