Peter Gfader's brain noise
Things to checkout after #SwissJeese. Sweet JavaScript conference in Bern.

This is my personal “links-to-checkout” list from #SwissJeese.

Polymer from google.io http://www.polymer-project.org/
Web Components usher in a new era of web development based on encapsulated and interoperable custom elements that extend HTML itself. Built atop these new standards, Polymer makes it easier and faster to create anything from a button to a complete application across desktop, mobile, and beyond.

X-tags The Custom Elements Polylib http://www.x-tags.org/ 
X-Tag is a small JavaScript library, created and supported by Mozilla, that brings Web Components Custom Element capabilities to all modern browsers.

Brick https://github.com/mozbrick/brick
Brick is a collection of UI components designed for the easy and quick building of web application UIs. Brick components are built using the Web Components standard to allow developers to describe the UI of their app using the HTML syntax they already know.

Custom Elements a web components gallery for modern web apps
Customelements.io http://customelements.io/

Mozilla appMaker An exploration in making app authoring available to non-developers.
https://apps.webmaker.org/designer 

—- Lightning Talks —-
smartCrop.JS http://29a.ch/2014/04/03/smartcrop-content-aware-image-cropping Image cropping is a common task in many web applications. Usually just cutting out the center of the image works out ok. It’s often a compromise and sometimes it fails miserably.

chartist.JS (inline SVG)
Chartist.js is a simple responsive charting library built with SVG
https://github.com/gionkunz/chartist-js

movies.io http://movies.io/
movies.io combines a pleasant and great-looking user interface with all the functionality needed to find and collect the best films out there.

Hoodie io http://hood.ie/  *offline first*
We want to enable you to build complete web apps in days, without having to worry about backends, databases or servers, all with an open source library that’s as simple to use as jQuery.

PouchDB http://pouchdb.com/
The Database that Syncs! PouchDB is an open-source JavaScript database inspired by Apache CouchDB that is designed to run well within the browser.

Remotestorage.io http://remotestorage.io/
An open protocol for per-user storage

ServiceWorker -> “appcache done right”
https://github.com/slightlyoff/ServiceWorker/

WeakMap - With manually written maps, the array of keys would keep references to key objects, preventing them from being garbage collected. In native WeakMaps, references to key objects are held “weakly”, which means that they do not prevent garbage collection in case there would be no other reference to the object.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap

How would you implement “Push” in web technologies?

Web Components usher in a new era of web development based on encapsulated and interoperable custom elements that extend HTML itself. Built atop these new standards, Polymer makes it easier and faster to create anything from a button to a complete application across desktop, mobile, and beyond.

How can you stop your code from killing your company? via @jamesshore

Great video where James Shore will answer that question. And he will show you how you can apply professional software development techniques to JavaScript.

James Shore: Rigorous, Professional JavaScript
https://vimeo.com/68334907

Do you know where to get inspiration as a frontend web developer?

CodePen is a playground for the front end side of the web. It’s all about inspiration, education, and sharing.

http://codepen.io/

On Hugo Giraudel’s blog you can find a comparison to other CSS Playgrounds like JsFiddle.
http://hugogiraudel.com/2012/11/19/css-playgrounds/ 

Do you use AngularJS directives?

From Joel Hooks 1 year experience report:
http://joelhooks.com/blog/2013/05/22/lessons-learned-kicking-off-an-angularjs-project/

  • Directives are the killer feature of AngularJS
  • put some serious thought into organizing Directives as visual components and behaviors

My new rule is that if you hear yourself humming the ABCs in your mind in order to find a specific file, your folders probably have too many files.

Nice rule!

Documentation on directives in AngularJS

Directives are a way to teach HTML new tricks.
During DOM compilation directives are matched against the HTML and executed. This allows directives to register behavior, or transform the DOM.

http://docs.angularjs.org/guide/directive

Angular: nice and clean readable source code
Read it now!
https://github.com/angular/angular.js/tree/master/src

use coffeescript for any non-trivial amounts of javascript via @martinfowler

I don’t have any experience with CoffeeScript, but from just looking at it and reading blog posts I like the syntax.

My concern: “Debugging might be hard” is resolved by Martin

If I need to debug in that code, I can easily see how it matches up to the source CoffeeScript.

Full article
http://martinfowler.com/bliki/TransparentCompilation.html

Client-Side MVC Roundup

Hei Internetz, I was away a couple of weeks and you guys created even more JS frameworks. #help

Nice recap of the major distinctions of JS MVC frameworks like angular, backbone, sammy, batman, knockout, … 
using the list from http://todomvc.com/

http://paulhammant.com/2013/01/18/client-side-mvc-roundup/

JavaScript editing in the browser - Marijn Haverbeke @marijnjh CodeMirror #gotoAar

Marijn showed how he “extended” a HTML textarea to a full functional editor

Nice features of codemirror like:
-Integration of JSLint
-syntax highlighting
-line numbers
-Search and Replace

How was it built:
-The cursor is a lie
separate div
-Scrollbars not real either
only the visible part is in the DOM
-dont be afraid of big files
B-Trees to the rescue

nice
“If you lie to the user once you need to lie more and more”

More features
-Spotting local variables in JavaScript via Syntax Highlighting
-Mode composition: Multiple syntax in 1 editor (HTML, CSS, JavaScript)

Future:
-Mobile support

Amazed how much work happens behind the scene, by something that seems so
simple.

Links
http://codemirror.net/
https://github.com/ajaxorg/ace
http://en.wikipedia.org/wiki/Comparison_of_JavaScript-based_source_code_editors

JavaScript SmackDown: AngularJS, Backbone, Batman, CanJS, Ember, Meteor, Knockout, Spine

Nice ThroneJS conference report. 

  • Agreement: Data binding is good
    All except Backbone and Spine have a built-in notion of declarative data binding in their views
  • IE6 is dead
  • Agreement: Model-View-* all the way

Great to get an overview of the different frameworks!

Rich JavaScript Applications – the Seven Frameworks
http://blog.stevensanderson.com/2012/08/01/rich-javascript-applications-the-seven-frameworks-throne-of-js-2012/

5 little JavaScript performance tips
  • Profile your JavaScript
  • Access the DOM once and in one big hit
  • Use Local versus Global variables
  • Avoid string.join
  • Access arrays objects once, if used multiple times

All the tips here

http://www.netmagazine.com/tutorials/optimise-your-javascript

Do you know how to find out about JavaScript performance?

jsPerf aims to provide an easy way to create and share test cases, comparing the performance of different JavaScript snippets by running benchmarks.

Great idea!
http://jsperf.com/

Do you know which MV* Javascript framework to use and choose?

TodoMVC — a project which offers the same Todo application implemented in most of the popular JavaScript MV* frameworks of today — think of it as speed dating for frameworks.

Solutions look and feel the same, have a common feature set, and make it easy for us to compare the syntax and structure of different frameworks, so we can select the one we feel the most comfortable with or at least, narrow down our choices.

Great stuff!!
http://todomvc.com/

And here is the intro article from Addy Osmani
Journey Through The JavaScript MVC Jungle
http://coding.smashingmagazine.com/2012/07/27/journey-through-the-javascript-mvc-jungle/
  

10 things you didn’t know JavaScript could do
#webmonday Native vs. Hybrid vs. Web Apps

Recap talks @ HP Zürich #MobileMondays and #WebMondays night

# Markus Leutwyler, HP: Web vs Native Apps

History of the web and mobile is repeating

  • 10 years ago: Web: hobby programmers make web 
  • Now: Apps: lots of hobbists make apps?

Reasons for native:

  • Performance
  • Offline mode
  • Findability (Discoverability)
    AppStore is less cluttered than Google?
  • Device integration
  • Monetization
  • Experience

Reasons for hybrid apps:

  • Code reuse
  • A common set of technologies
  • Low barrier of entry
  • Cross platform reach
  • Familiar tools and techniques
  • Not tied to an vendor market place (AppStore,…)
  • Start an app from a URL (potentially)

Hybrid options

  • PhoneGap: Package website as an application
  • MonoTouch

The OS is the browser!?
ChromeOS, HP webOS, boot2Gecko (FireFox)



# Colin Frei, Liip AG

works at LIIP, php in the backend, HTML+CSS 

NIWEA.ch   native interoperable web application

Other containers for hybrid apps

  • GameCloser
  • Cocoon JS
  • PhoneGap

A container gives you access (JavaScript) to some device API

PhoneGap is for: iOS, Android, WinPhone, BlackBerry (RIM)

Advantages of Hybrid

  • Knowledge: lots of devs out there, heaps of knowledge
  • 1 team that works on 1 code base
    Instead of 1 guy that knows the iPhone app
  • Portability: code can be easilty ported to different platforms
  • Reusability: code can be reused 
  • COST?

Disadvantages

  • Not everything is supported
    You have device specific code
  • Performance

PhoneGap to wrap HTML+JS up and submit it to the AppStore

  • In-App purchases: PhoneGap has a feature for that
  • Notification service by PhoneGap


Good experience overall from Colin

  • Submitting to Apple takes time to get used to
  • Not many bugs.. released months ago
  • HTML5: more and more functionality is going into the device




# Vikram Kriplaney: Founder of mobile @ local.ch

Reasons for going native

  • Go beyond the standard usage
    Use the whole native possibilities
  • Be aware of Leaky abstractions:
    "All non-trivial abstractions, to some degree, are leaky."(Joel Spolsky)

Goal: The more audience the more effort to put in

How do you test a mobile application?

  • Manual? How can you automatically test on every change?
    Automation and Manual and Internal Dogfooding 

Do you measure feature usage per platform?

  • Yes per platfrom with Google Analytics etc…


My 2c to this discussion

#1 Is it better to have a Porsche UI and a VW engine
than a VW UI and a Porsche engine.
Of course you want a Porsche UI and a Porsche engine, but

#2 The first impression is important! 
You only get one shot. Or maybe 2

#3 A potential approach

  1. Start with a hybrid 
    Leverage 1 of those great frameworks to get something up and running quickly
  2. Measure (usage, performance, ..)
  3. If you need native (see measurements), go native
  4. Rinse and repeat


Great explanation about hoisting and how you should code for it: One “var” at the top of scope.

Awesome that JSLint can spot this.

Nice article from Maurice de Beijer that describes the evolution of JavaScript client side templating and shows knockout.js