Survive JavaScript - Strategies and Tricks

Survive JavaScript Strategiesand Tricks Juho Vepsäläinen AgileJkl 2013

What's in Store? Web Development Strategies JavaScript Tricks Conclusion · How Did We Get Here Where Are We Now Where Are We Headed - - - · Node.js Development Tools Structuring Code Finding Libraries Testing - - - - - ·

Strategy for Goldfishes Source: HikingArtist.com (CC BY-NC-ND)

Ten Days to JavaScript 1995 - Brendan Eich's ten days → Mocha Known as LiveScript till the marketing folks changed the name Even though has Java in name, completely different Influence of Java 1.0 visible mainly in Math and Time modules Prototypal inheritance a lá Self Dynamic, flexible, lambdas Scheme in disguise - See The Little JavaScripter by Crockford · · · · · · ·

A Bit of JavaScript varhelloAgileJkl=hello.bind(undefined,'AgileJkl!'); helloAgileJkl(); functionhello(target){ console.log('Hello'+target); } //orcouldjust console.log('HelloAgileJkl!'); //toavoidover-engineering! JAVASCRIPT

Web - From Documents to Applications Web as a Document Platform Improved Interactivity Web as an Application Platform · 1995 - Brendan Eich's ten days 1999 - ES3 (modern baseline), Mozilla established - - · 2005 - AJAX, dynamic loading (search for instance) 2008 - RIP ES4, parts of HTML5 emerge, Chrome (V8) 2009 - ES5, Chrome OS, Node.js - - - · 2012 - HTML5 well supported (interesting JS APIs)- Source: Brendan Eich at Strange Loop '12

JavaScript Has Traction Source: Redmonk

Crockford Source: superfluity (CC BY-NC-SA)

The Good Parts vs. The Rest Source: Oльга + Haфaн (CC BY)

Recap JavaScript, an unlikely winner Language of the web More powerful than it seems Web isn't just about documents, now applications too · · · ·

CoffeeScript CoffeeScript is a little language that compiles into JavaScript. Underneath that awkward Java-esque patina, JavaScript has always had a gorgeous heart. CoffeeScript is an attempt to expose the good parts of JavaScript in a simple way. The golden rule of CoffeeScript is: "It's just JavaScript". The code compiles one-to-one into the equivalent JS, and there is no interpretation at runtime. You can use any existing JavaScript library seamlessly from CoffeeScript (and vice-versa). The compiled output is readable and pretty-printed, passes through JavaScript Lint without warnings, will work in every JavaScript runtime, and tends to run as fast or faster than the equivalent handwritten JavaScript. Latest Version: 1.6.2 sudo npm install -g coffee-script Overview CoffeeScript on the left, compiled JavaScript output on the right. # Assignment: number = 42 opposite = true var cubes, list, math, num, number, opposite, race, square, __slice = [].slice; TABLE OF CONTENTS TRY COFFEESCRIPT ANNOTATED SOURCE

Dart (/) Dart brings structure to web app engineering with a new language, libraries, and tools. Read about our new M4 release! (http://news.dartlang.org/2013/04/core- libraries-stabilize-with-darts- new.html) News (http://news.dartlang.org/) TweetTweetSearch Docs Tools Resources Development

TypeScript Get TypeScript Now TypeScript is a language for application-scale JavaScript development. TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. Any browser. Any host. Any OS. Open Source. Starts from JavaScript, Ends with JavaScript TypeScript starts from the syntax and semantics that millions of JavaScript developers know today. learn play get it run it join in

Jade doctype 5 html(lang="en") head title= pageTitle script(type='text/javascript') if (foo) { bar() } body h1 Jade - node template engine #container if youAreUsingJade <!DOCTYPE html> <html lang="en"> <head> <title>Jade</title> <script type="text/javascript"> if (foo) { bar() } </script> </head> <body> <h1>Jade - node template engine</h1> View Documentation Node Template Engine

Mustache } Logic-less templates. Available in Ruby, JavaScript, Python, Erlang, PHP, Perl, Objective-C, Java, .NET, Android, C++, Go, Lua, ooc, ActionScript, ColdFusion, Scala, Clojure, Fantom, CoffeeScript, D, and for node.js. Works great with TextMate, Vim, Emacs, and Coda. The Manual: mustache(5) and mustache(1) Demo

Handlebars Handlebars provides the power necessary to let you build semantic templates effectively with no frustration. Mustache templates are compatible with Handlebars, so you can take a Mustache template, import it into Handlebars, and start taking advantage of the extra Handlebars features. Download: 1.0.0-rc.3Download: 1.0.0-rc.3 Download: runtime-1.0.0-rc.3 Getting Started

Transparency Examples Assigning valuesAssigning values Iterating over a listIterating over a list Nested listsNested lists Nested objectsNested objects Transparency is a minimal template engine for jQuery. It maps JSONTransparency is a minimal template engine for jQuery. It maps JSON objects to DOM elements with zero configuration.objects to DOM elements with zero configuration. Just call .render()Just call .render() CoffeeScript JavaScript hello= hello:"Hello!" hi: "<i>Hithere!</i>" span: "Goodbye!" $('.container').renderhello Jade HTML .container #hello .hi span

LESS Write some LESS: @base: #f938ab; .box-shadow(@style, @c) when (iscolor(@c)) { box-shadow: @style @c; -webkit-box-shadow: @style @c; -moz-box-shadow: @style @c; } .box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) { .box-shadow(@style, rgba(0, 0, 0, @alpha)); } .box { color: saturate(@base, 5%); border-color: lighten(@base, 30%); div { .box-shadow(0 0 5px, 30%) } } Compile to CSS: npm install -g less lessc styles.less styles.css version 1.3.3 changelog The dynamic stylesheet language. LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS runs on both the server-side (with Node.js and Rhino) or client-side (modern browsers only). overview usage language function reference source about try it now! FollowFollow

SASS $ gem install sass $ mv style.css style.scss $ sass --watch style.scss:style.css About Tutorial Documentation Blog Try Online Latest Release: Media Mark (3.2.7) What's New? Download Editor Support Development Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin. Sass has two syntaxes. The most commonly used syntax is known as “SCSS” (for “Sassy CSS”), and is a superset of CSS3’s syntax. This means that every valid CSS3 stylesheet is valid SCSS as well. SCSS files use the extension .scss. The second, older syntax is known as the indented syntax (or just “.sass”). Inspired by Haml’s terseness, it’s intended for people who prefer conciseness over similarity to CSS. Instead of brackets

Twitter Bootstrap Bootstrap (./index.html) Bootstrap Sleek, intuitive, and powerful front-end framework for faster and easier web development. Download Bootstrap (assets/bootstrap.zip)

Zurb Foundation Features (grid.php) Add-ons (templates.php) Case Studies (case-jacquelinewest.php) Docs (docs) Training (training.php) Foundation (http://foundation.zurb.com) Foundation The most advanced responsive front-end framework in the world. Download Foundation 4 (download.php) 10.9k stargazers (http://github.com/zurb/foundation) @foundationzurb (http://twitter.com/foundationzurb)

Data Usually handled with a backend or external services (Disqus for comments for example) RESTful interfaces (client-side MVC) Local caching (localStorage ie.) Offline usage (replication, PouchDB) · · · ·

Big Data Source: infocux Technologies (CC BY-NC)

Recap Logics are violet Markups are blue Styling is sweet And so is data

Enlightenment Source: michael.heiss (CC BY-NC-SA)

Source: Augie Schwer (CC BY-SA)

Source: letmehearyousaydeskomdeskom (CC BY-SA)

Shim a thin often tapered piece of material (as wood, metal, or stone) used to fill in space between things (as for support, leveling, or adjustment of fit) Source: Merriam-Webster, esagor (CC BY-NC)

caniuse.com Index Tables Can I use... Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers. Latest update: Three new features added: Shadow DOM, WebP images & Intrinsic width & height (April 3, 2013) Search: border‑radius, WebGL, woff, etc CSS @fontface Web fonts calc() as CSS unit value 2.1 selectors Counters Feature Queries Filter Effects Generated content Gradients Grid Layout Hyphenation inlineblock Masks min/maxwidth/height outline position:fixed Regions HTML5 Audio element Canvas (basic support) Color input type contenteditable attribute (basic support) Datalist element dataset & data* attributes Date/time input types Details & Summary elements Download attribute Drag and Drop Form validation HTML5 form features input placeholder attribute New semantic elements Number input type Offline web applications SVG Inline SVG in HTML5 SVG (basic support) SVG effects for HTML SVG filters SVG fonts SVG fragment identifiers SVG in CSS backgrounds SVG in HTML img element SVG SMIL animation All SVG features Other async attribute for external scripts TOP Suggestions Feed Twitter Import stats FAQ Resources Embed 564

Android Source: San Diego Shooter (CC BY-NC-ND)

Source: Brian LeRoux (CC BY-NC-SA)

Native vs. HTML5 Native apps still have their advantages JS is a good alternative for prototyping Available technology keeps maturing And we'll likely see better platform support · · · ·

Other Considerations What belongs to server, what to client and why (business goals) Client-side MVC is not a silver bullet Basecamp's experiences (hint: pushState, aggressive caching) Synchronization, offline usage, skills, time, budget... Fashion. Techs come and go Up and coming? Mixed approaches. Examples: Meteor, Derby, mojito, rendr · · · · · ·

Recap Web dev is as hard as you make it Especially on the bleeding edge Fortunately a bit of tape fixes anything Mobile on the rise, native HTML5 apps not mainstream yet Web architectures - from monoliths to distributed · · · · ·

Packages per Year Python: 29,720 packages / 22 years = 1351 packages / year Ruby: 54,385 packages / 18 years = 3022 packages / year Node.js: 26,966 packages / 4 years = 6742 packages / year · · · Source: Gregg Gaines

Server Using Callbacks varhttp=require('http'); http.createServer( function(req,res){ res.writeHead(200,{'Content-Type':'text/plain'}); res.end('HelloAgileJkl!n'); } ).listen(8000); JAVASCRIPT Short and sweet Express is very popular for more complex cases · ·

Server Using EventStreams varhttp=require('http'); vars=newhttp.Server(); s.on('request',function(req,res){ res.writeHead(200,{'Content-Type':'text/plain'}); res.end('HelloAgileJkl!n'); }); s.listen(8000); JAVASCRIPT Viable alternative to callbacks at times More info at Node.js: Patterns and Opinions by @izs (the Node guy) · ·

Recap Excellent for prototyping Strong ecosystem thanks to NPM Develops at a blistering pace · · ·

Vim, Emacs, Sublime Text, WebStorm...

Chrome Inspector See also Firebug· Source: Chrome DevTools

LiveReload LiveReload 2 proudly presents… The Web Developer Wonderland (a happy land where browsers don't need a Refresh button) CSS edits and image changes apply live. CoffeeScript, SASS, LESS and others just work. Citizenship is granted through the Mac App Store. Windows permanent residency issues are being worked out, temporary stay already allowed.

JSLint clear Read the instructions. Set the options. Enjoy The Good Parts. Donate. The JavaScript Code Quality Tool Edition 2013-04-09 Source // Paste quality code here See also JSHint·

jsFiddle Run Save TidyUp JSHint Login/Sign up No‑Library (pure JS) onLoad Tip JSFiddle Frameworks & Extensions Fiddle Options External Resources Languages Ajax Requests Examples Legal, Credits and Links Gittip Keyboard shortcuts? 1 1 1 HTML JavaScript CSS Result Others: jsbin, jsdo.it, ...·

Cloud9 IDE Cloud9 IDE - Online IDE Give us a shout out: Share on twitter Share on Google Share on facebook Share on email Sign up Sign out Username or e‑mail Password Sign In Keep me signed in Forgot password? Resend activation email Or sign in instantly with: NEWS: The Changelog of March: Stability, Performance, Features Hey there! Over the past month we have worked very hard on improving the stability and performance of our service. In addition, we also worked on some interface changes ... read the full article | see all articles Pricing Features Blog Company Company• Board Members• Jobs• Press• Contact Node.js Node.js• Nodebits.com• NodeManual.org Support Support• Status• Documentation Your code anywhere, anytime...

Recap Traditional editors and IDEs are fine Additional tooling available, use it Future in the web? · · ·

The Anti-Pattern <scriptsrc='jquery-current.js'type='text/javascript'></script> <scriptsrc='sorttable.js' type='text/javascript'></script> <scriptsrc='scripts.js' type='text/javascript'></script> <scriptsrc='miniCalendar.js' type='text/javascript'></script> HTML Each include has to be defined by hand Brittle and prone to error, especially with large codebases Does not encourage to modularity Hard to reuse · · · ·

Concatenate Scripts <scriptsrc='application.js'type='text/javascript'></script> HTML Old skool but works Less overhead at HTML Still, running into dependency order problem at concatenation Possible to complement by loading scripts (ie. jQuery) from a CDN Nevertheless a step forward · · · · ·

RequireJS and AMD + Bower <scriptdata-main="scripts/main"src="scripts/require.js"></script> HTML define(['jquery','./math'],function($,math){ return{//exports vector:function(){...} }; }); JAVASCRIPT Modular, asynchronous approach Includes defineoverhead (possible to mimic Node.js convention, though) Optimizer resolves dependencies and creates build (loadable with Almond) Configuration complex at times · · · ·

Browserify + NPM <scriptsrc='application.js'type='text/javascript'></script> HTML var$=require('jquery'); varmath=require('./math'); exports.vector=function(){...}; JAVASCRIPT Allows to use Node.js module convention (CJS) Better yet allows to hook into NPM ecosystem! Still fairly bleeding edge · · ·

Recap No official module system yet (ES6?) Many alternatives (AMD, CJS etc.) browserify looks promising (NPM!) · · ·

NPM Search Packages NODE.JS HOME DOWNLOAD ABOUT NPM REGISTRY DOCS BLOG COMMUNITY LOGOS JOBS Node Packaged Modules Total Packages: 28 067 907 584 downloads in the last day 9 157 954 downloads in the last week 33 188 669 downloads in the last month Patches welcome! Any package can be installed by using npminstall. Add your programs to this index by using npmpublish. Recently Updated 0m jspm Most Depended Upon 2740 underscore Create Account | Login

Bower Bower components Discover Bower (http://bower.io) components Check out some of my other projects Focus (https://github.com/sindresorhus/focus), JsRun (https://github.com/sindresorhus/sublime- jsrun), sublime- editorconfig (https://github.com/sindresorhus/editorconfig- sublime), GitHub-Notifier (https://github.com/sindresorhus/GitHub- Notifier), Pure (https://github.com/sindresorhus/pure), quora-unblocker (https://github.com/sindresorhus/quora- unblocker) screenfull.js (https://git… stringify-object (https:/… Featured components Fullsc… API wrap… String… an flight-storage (https://gi… spice.css (https://github… Latest components Store… JSON data Basic… dry css min.js (https://github.co… angularjs-ordinal-filter … Hot components Super… mini… select… Angul… Ordinal (https://github.com/sindresorhus/bower-components)

JSwiki JSwiki 2 TweetTweet 59 EditEdit Hi there! Welcome to jswiki. This wiki indexes libraries and resources available for JavaScript. In addition it provides some starting points for newbies in form of Beginner's Resources. In case you want to contribute, do take a look at Meta first for some extra pointers. Happy hacking! IMPORTANT! jster.net is a spiritual successor of jswiki. There is more content but the site is less of a wiki. jswiki will remain here as more of a communal alternative. In addition you might want to check out the following: JSwiki Essentials Multimedia Graphics Data UI Utilities Development Applications jsgamewiki Microjs EveryJS JSDB JSPkg

JSter FollowFollow @jsterlibs@jsterlibs Blog Catalog Add Library Sign In Find a Javascript library JSter is a catalog of 1095 JavaScript libraries and tools for web development. Problems?Problems?

Recap No need to just Google it Package managers (esp. NPM) make your life easier Avoid NIH and use existing solutions · · ·

Unit Testing assert(title('HELLOWORLD!')==='HelloWorld!'); assert(title('Helloworld!')==='HelloWorld!'); assert(title('hi')==='Hi'); assert(title()===undefined); functiontitle(s){ returns&&s.split('').map(capitalize).join(''); } functionassert(s){ if(!s)thrownewError('Assertionfailed!'); } JAVASCRIPT Popular alternatives: Jasmine (BDD), Mocha, QUnit·

Fuzz Testing //functiontotest,noteannotation vartitle=annotate('title','Returnsgivenstringinatitleformat.') .on(is.string,function(s){ returns&&s.split('').map(capitalize).join(''); }).satisfies(is.string); //testinganinvariant fuzz(title,function(op,str){ varparts=op(str).split(''); returnparts.map(fst).map(isUpper).filter(id).length==parts.length; }); JAVASCRIPT Up and coming (hopefully)· Source: bebraw/annofuzz

Testling testling-cirun your browser tests on every push write some tests Use the test runner you like best! The only thing your test runner needs to do is to produce TAP output on console.log or process.stdout. Here's an example project using mocha. You can also use tape to output TAP output in browsers and in node. Here is what a simple tape test looks like: var test = require('tape'); var myCode = require('../my_code.js'); test('make sure my code works', function (t) { t.plan(2); t.equal(myCode.beep(5), 555);

Travis travis-ci.org Blog Documentation English Français Español Português Travis CI A hosted continuous integration service for the open source community. Welcome to Travis CI # Travis CI is a hosted continuous integration service for the open source community. It is integrated with GitHub and offers first class support for: C C++ Clojure Erlang Go Groovy Haskell Java JavaScript (with Node.js) Perl

Browserling interactive cross-browser testing http:// 3.0 3.5 3.6 4.0 5.0 6.0 7.0 8.0 9.0 10.0 11.0 12.0 13.0 14.0 15.0 16.0 17.0 18.0 19.0 nightly create account sign in

Browserstack Live, Web-Based Browser Testing Instant access to all desktop and mobile browsers. Say goodbye to your setup of virtual machines and devices. Free Trial Sign up for free Full Name Email Password No credit cardNo credit card required. We promise.required. We promise. Support Pricing Free TrialResources Sign inLive

Chaos Monkey Source: Jeff Atwood - Working with the Chaos Monkey

AB Testing Source: TheBusyBrain (CC BY)

Recap Test your JS Browser differences bring their own challenge Future in continuous integration (Travis and co.) Fail constantly to avoid failure · · · ·

Conclusion JS - the most valuable language you don't know yet A target for tool and language development Not without its quirks but still manageable The most important language of this decade? · · · ·

Survive JS - The Guide Survive JS Have you ever felt lost in the JavaScript jungle? If so, you are in the right place. The purpose of this guide is to provide you with sharp implements that help you survive and perhaps thrive even. Even seasoned JavaScript explorers might find a trick or two to apply in practice. As it is very possible I have not reached omnipotence yet, I encourage you to submit issues. This way we can make the guide to serve you better. I am well aware there are other excellent resources out there. Of these I would like to mention Eloquent JavaScript and JavaScript Garden in particular. I have listed various beginner's resources over at JSwiki, the predecessor of JSter. Table of Contents A Misunderstood Language? - What is the essence of JavaScript? Why is it relevant? Current State - What is the current state of JavaScript and the ecosystem? Language Features - What the language looks like? How to use it effectively? EditEdit TweetTweet 0 0 Table of Contents Survive JS

Thank You! twitter @bebraw www www.nixtu.info github github.com/bebraw

Survive JavaScript - Strategies and Tricks

More Related Content

What's hot

Similar to Survive JavaScript - Strategies and Tricks

More from Juho Vepsäläinen

Recently uploaded

Survive JavaScript - Strategies and Tricks