Huge Web Appsdaniel.steigerwald.cz

● independent software gardener● web applications consultant and trainer● Google Developer Expert● libertarian svobodni.cz

About Me

What is a Huge App?

sooner or later

The Pain.

Symptoms

● fixing bugs creates new bugs● rotten code● developers paralyzed by fear● technical debts● reinventing the wheel● perpetual rewriting

= stress driven development

Remedies

● optional static typing● user interface frameworks● clean code● clean architecture● good infrastructure● unit tests● senior developers :-)

Optional Static Typingdynamic versus static

Keeping Your Code in Check!Make it hard to do the wrong thing.

Makes code more readable.function(duck) { // which duck? duck.quack(); }

Makes code more robust.function(duck) { duck.quack(); // does quack?}

No JavaScript?The king is dead, long live the king!

Closure, Dart, TypeScriptBorn to be wild tamed.

Google ClosureThat's how Google build apps.

function fn(duck) {

duck.quack();

}

/**

* @param {Duck} duck

*/

function fn(duck) {

duck.quack();

}

DartThat's how Google will build apps.

fn(duck) {

duck.quack();

}

fn(Duck duck) {

duck.quack();

}

TypeScriptMicrosoft did the right thing.

function(duck) {

duck.quack();

}

function(duck: Duck) {

duck.quack();

}

github.com/borisyankov/DefinitelyTyped

fixing legacy code

Ace Cloud9 Editor AmCharts AngularJS Arbiter async Backbone.js Backbone Relational Bootbox Bootstrap bootstrap-notify bootstrap.datepicker Box2DWeb Breeze Browser Harness CasperJS Cheerio Chosen Chrome CodeMirror Commander d3.js docCookies domo dust EaselJS ember.js EpicEditor expect.js Express Ext JS Fabric.js Fancybox File API: Directories and System File API: Writer Finite State Machine Firebase Firefox FlexSlider Foundation FPSMeter FullCalendar Gamepad glDatePicker GoJS GreenSock Animation Platform Grunt JS Google API Client Google App Engine Channel API GoogleMaps Google Geolocation Google Page Speed Online API Google Translate API Google Url Shortener Hammer.js Handlebars Highcharts highlight.js History.js Humane.js i18next iCheck Impress.js Intl iScroll jake Jasmine Jasmine-jQuery JointJS jQRangeSlider jQuery jQuery Mobile jQuery UI jQuery.Address jQuery.areYouSure jQuery.autosize jQuery.BBQ jQuery.contextMenu jQuery.clientSideLogging jQuery.Colorbox jQuery.Cookie jQuery.Cycle jQuery.dataTables jQuery.dynatree jQuery.Flot jQuery.form jQuery.Globalize jQuery.gridster jQuery.jNotify jQuery.noty jQuery.pickadate jQuery.payment jQuery.scrollTo jQuery.simplePagination jquery.superLink jQuery.timeago jQuery.Timepicker jQuery.TinyCarousel jQuery.TinyScrollbar jQuery.Transit jQuery.Validation jQuery.Watermark jScrollPane JSDeferred JSONEditorOnline jStorage JWPlayer KeyboardJS Knockback Knockout.js Knockout.DeferredUpdates Knockout.ES5 Knockout.Mapping Knockout.Postbox Knockout.Validation Knockout.Viewmodel ko.editables KoLite Leaflet Libxmljs ladda Levelup linq.js Livestamp.js Logg Marked Meteor Modernizr Moment.js MongoDB Mousetrap Mustache.js Node.js node_redis node-ffi node_zeromq node-sqlserver Numeral.js Parallel.js PDF.js Persona PhantomJS PhoneGap PixiJS Platform PouchDB PreloadJS QUnit Raven.js Rickshaw Restify Royalslider Rx.js Raphael Restangular require.js Sammy.js Select2 Sencha Touch SharePoint SignalR Sinon SlickGrid socket.io SockJS SoundJS Spin stripe Store.js Sugar Swiper SwipeView Tags Manager Teechart three.js Toastr trunk8 TweenJS tween.js twitter-bootstrap-wizard Ubuntu Unity Web API Underscore.js Underscore.js Underscore-ko.js UUID.js Viewporter Vimeo WebRTC WinJS WinRT YouTube YouTube Analytics API YouTube Data API Zepto.js Zynga Scroller ZeroClipboard

User InterfaceBeyond the jQuery Backbone.

Why Backbone is not enough?It doesn’t aspire to be anything more than a

lightweight library for models and collections.

Why Backbone is not enough?Default Backbone view is simply too simple.

todomvc.com

Handlebars, Mustache, Underscore templates, Dust, Jade and many others...

HTML templates based only on string concatenation are

obsolete.

Don't hold state in DOM.Use DOM only as app state projection.

Partial DOM updates sucks.this.$('#filters li a') .removeClass('selected') .filter('[href="#/' + (app.TodoFilter || '') + '"]') .addClass('selected');

Say no to boilerplate code.especially for view updates

Angular, Ember, Reactview updates done well

/** @jsx React.DOM */

var HelloMessage = React.createClass({

render: function() {

return <div>{'Hello ' + this.props.name}</div>;

}

});

React.renderComponent(<HelloMessage name="John" />, el);

Facebook React

var Nav, Profile;

// Input (JSX):

var app =

<Nav color="blue">

<Profile>click</Profile>

</Nav>;

// Output (JS):

var app = Nav({color:"blue"}, Profile(null, "click"));

Facebook React

este.demos.react.todoApp = este.react.create

render: ->

@div [

este.demos.react.todoList 'items': @state['items']

if @state['items'].length

@p "#{@state['items'].length} items."

@form 'onSubmit': @onFormSubmit, [

@input

'onChange': @onChange

'value': @state['text']

@button "Add ##{@state['items'].length + 1}"

]

]

Facebook React in Este.js

Angular/Ember vs. React<HTML> vs. code()

Angular/Ember vs. ReactDeclarative programming doesn't work. Sooner or later, all declarative languages ended up Turing-

complete, even HTML+CSS.

Separating your markup and logic, that’s not real separation of concerns. That’s separation of

technologies.

React Great Idea

Angular vs. Reactserver render ready*

SVG/VML/Canvas render readyWolfenstein render ready**

* no, Phantom.js is not a solution, it's hideous hack** www.petehunt.net/wolfenstein3D-react/wlf3d.html

React/Angular + Backbone separate model from view

Clean Code and Architecture

The Fewer Magic the Betterexplicit code over clever code

How to Structure App?By features. Always.

/controllers

/directives

/services

/filters

/views

/enumerations

/classes

/wtf's?

Wrong

/users

/products

/orders

/controller.js

/model.js

/collection.js

/process.js

/delegate.js

Good

Ensure you have a good style,good source code style.

JSHint, Coffeelint,Closure Lint (for code style nacist)

SOLID HomeworkSingle responsibility, Open-closed, Liskov substitution,

Interface segregation and Dependency inversion.

en.wikipedia.org/wiki/SOLID_(object-oriented_design)cleancoders.com

MVCman versus controller

Separated ModelAlways.

Componentization"The secret to building large apps is never build

large apps. Break your application into small pieces. Then, assemble those testable, bite-sized pieces

into your big application." Justin Meyer

Components or Views?

Dependency Injectionor as it's also known, passing arguments

Service Locatorcode coupling FML

How to test this?function fire() { Wolf.sound.play(); ...}

Is sound instance ready?function fire() { Wolf.sound.play(); ...}

Better.function fire() { this.sound.play(); ...}

Fine Service Locatorcode coupling FTW!

// side effects free

Math.abs x

// intentionally coupled code

new Coordinate x, y

// constants

Math.PI

Fine Service Locators

Angular developers can check Facebook now.

App Logic and App Wiring Separation

Good Infrastructurepackage management, module loader, source code

linter, task runner

Require.js, Bower, Component.io, Grunt.js, Browserify, ECMAScript 6 modules… etc.

Good Infrastructure

Unit TestsWhy and How.

Why to Write Unit Tests?If you don't know why, don't write them!

How to Structure Unit TestsArrange, Act, Assert.

Humansorry, no patterns for that

Except…Don't cheat and have fun.

Thank youdaniel.steigerwald.cz