Polymer Library

Paper library was announced in Google IO 2014 for Material Design Elements

https://github.com/Polymer/docs/tree/master/docs/elements

TALKS AT GOOGLE IO 2014

 

1. https://www.youtube.com/watch?v=HKrYfrAzqFA&feature=youtube_gdata

http://www.one-tab.com/page/UzM_nln0TaCFm8IARjr-ew

 

2. https://www.youtube.com/watch?v=yRbOSdAe_JU

COMPONENTKITCHEN

webcomponents.org

custom elements

 

3.  https://www.youtube.com/watch?v=8OJ7ih8EE7s

polymer-change.appspot.com

design tips

Don’t listen to the user, observe the user’s behavior

Don’t ask the users to predict the future

Don’t ask yes/no Questions

Don’t perfectly execute the wrong plan

Do user experience sampling

LIsten to the user needs and wants

Do 404 testing, (Fake Doors) where u make the user click on an offering that doesn’t exist just to see how many users click on it, and when they do, just say that it’s coming soon.

log file analyser using Splunk

I have an application that logs in Splunk friendly format, but coz of the batch way of uploading the log files to the remote splunk server, the logs are 5-1- min in the past.

this renders logs useless for real time debugging… re’s another svc, that exposes all the logs on the web as a web app and another svc, that just returns the splunk log file as it is…

I have created a chrome extension that simply polls the log svc from all servers, every x seconds and gives them to the local splunk server for indexing..it also shows a notification in case the log files have changed…and on clicking on the extension badge, it opens the local splunk instance for log analysis

AMD and CommonJS

With Typescript you can compile the same code into 2 different types and hence share code between node  (commonJS) and client side JS (AMD)

With AMD, the js can even declare the css and other files that it depends on and so they’ll all be lazily loaded

 

requireJS is the AMD Loader behind the scenes

r.js is from the same guys and used for packaging 

 

use tslint (github)

 

see this talk: Building a Large Scale JavaScript Application in TypeScript – YouTube

CommonJS is winning

Angular TypeScript

i’ve been struggling with integrating Angular and TypeScript  for some time now, and have worked on both seperately till now.

today i found “Mark Rendle – Angular TypeScript on Vimeo” which is quite a nice way to equate angular’s way of doing things with how TS does it.

Also : https://skillsmatter.com/skillscasts/40Controller Dependency Define in Constructor Controller Controller1 Controller2 Controller3 Controller4 Controller5 Controller6 Controller7 Controller8 Controller9 Controller10 Controller11 Controller12 Controller13 Controller14 Controller15 Controller16 Controller17 Controller18 Directives Directives1 Function Overloads possible in TS unlike JS Services Services153-practice-with-mark-rendle

http://blorkfish.wordpress.com/2014/02/03/setting-up-typescript-and-angularjs-in-visual-studio-2013/

https://skillsmatter.com/skillscasts/4053-practice-with-mark-rendle

https://github.com/seanhess/angularjs-typescript

 

Gotchas for controllers in TS

1. Declare JSON Data as interface so as to get intellisense on it

2. Keep the class methods not bound to scope as private so that mentally u know what is exposed to scope..even though this is just convention..

3. when u define scope as extended from ng.IScope, then the properties that u add to it will not be identified by the compiler…so what to do…:

4. Instead of watching a prop now, you can have computed props like in knowckout and amber and hence extract the code of $watch handler in functions

 

A. Create your own interface that extends from IScope and has the new props that u want on the $scope object, but that;s ugly and also every time new prop added, interface has to change

B. Add the entire controller itself as a prop on the scope, so that now the controller class props are also a part of the $scope and hence bound to the UI, and new props can be added anywhere by using the this pointer, eg. this.todos

For this, ANgular added the controllerAs property to the routeProvider

5. Also note that when registiring event handlers using $on(‘event’, this.eventHandler),  note that the eventHandler function definition within the class has to be like this: private eventHandler = () => {}

This is coz all methods in the controller class, when compiled to JS become a part of the prototype of the JS Object, but this being an event handler need to be a a function and not a method, meaning that when this is invoked, we want the this pointer to refer to the caller and not the prototype…

so the many ways to make this right are :

A. register event hadndler like this: $on(‘event’, this.eventHandler.bind(this))

OR

B. register event hadndler like this: $on(‘event’, () => this.eventHandler())

C. This is the way the TS Team recommends that we solve this problem:

private eventHandler = () => {}

 

What this translates to, in JS, is that it will not set the lambda to the prototype, but instead, set it up such that wherever there is a thsi inside the function def, it replaces “this” with “_this”,the closure variable (note, var _this = this in the controller definition). This is default behavior for lambda

It causes _this to point to what “this” was always and not the this context that the caller (person who raised the event) passed as “this”

Note that when the normal class methods are called, the this. in them simply refers to the calling instance of the Controller Class

BreezeJS with Angular

Like always i find a better solution in retrospective…i’ve been working on an angular app which is like a q&a site, so you fill in a lot of ans and then submit the whole thing, 

now like any kind person, we didn’t want the user to loose the ans, just coz he closed the tab….so we now make a call to save every ans..and that is working fine and we’re happy, until i saw this techEd 14 video : “Building Rich Apps with AngularJS on ASP.NET – YouTube”, which talks about how BreezeJS gives local storage persistance out of the box, for every keystroke, 

and now i feel so stupid for having persisted every ans in the database and then for tab close and reopen, bring in all the data back and restore the state..

and ours is incidentally a chrome only app, so using the local storage would have been a great use case for once….

the video also talks of validations and data sharing and querying that Breeze brings out of the box

Code: https://github.com/johnpapa/ng-demos