Huge Web Apps
daniel.steigerwald.cz
● independent software gardener
● web applications consultant and trainer
● Google Developer Expert
● libertarian svobodni...
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 w...
Remedies
● optional static typing
● user interface frameworks
● clean code
● clean architecture
● good infrastructure
● un...
Optional Static Typing
dynamic 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, TypeScript
Born to be wild tamed.
Google Closure
That's how Google build apps.
function fn(duck) {
duck.quack();
}
/**
* @param {Duck} duck
*/
function fn(duck) {
duck.quack();
}
Dart
That's how Google will build apps.
fn(duck) {
duck.quack();
}
fn(Duck duck) {
duck.quack();
}
TypeScript
Microsoft 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 boot...
User Interface
Beyond 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 concatenatio...
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 || '') +...
Say no to boilerplate code.
especially for view updates
Angular, Ember, React
view updates done well
/** @jsx React.DOM */
var HelloMessage = React.createClass({
render: function() {
return <div>{'Hello ' + this.props.name}...
var Nav, Profile;
// Input (JSX):
var app =
<Nav color="blue">
<Profile>click</Profile>
</Nav>;
// Output (JS):
var app = ...
este.demos.react.todoApp = este.react.create
render: ->
@div [
este.demos.react.todoList 'items': @state['items']
if @stat...
Angular/Ember vs. React
<HTML> vs. code()
Angular/Ember vs. React
Declarative programming doesn't work. Sooner or
later, all declarative languages ended up Turing-
...
Separating your markup and logic, that’s not real
separation of concerns. That’s separation of
technologies.
React Great I...
Angular vs. React
server render ready*
SVG/VML/Canvas render ready
Wolfenstein render ready**
* no, Phantom.js is not a so...
React/Angular + Backbone
separate model from view
Clean Code and Architecture
The Fewer Magic the Better
explicit 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 Homework
Single responsibility, Open-closed, Liskov substitution,
Interface segregation and Dependency inversion.
en...
MVC
man versus controller
Separated Model
Always.
Componentization
"The secret to building large apps is never build
large apps. Break your application into small pieces.
T...
Components or Views?
Dependency Injection
or as it's also known, passing arguments
Service Locator
code 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 Locator
code coupling FTW!
// side effects free
Math.abs x
// intentionally coupled code
new Coordinate x, y
// constants
Math.PI
Fine Service Locato...
Angular developers can check Facebook now.
App Logic and App Wiring
Separation
Good Infrastructure
package management, module loader, source code
linter, task runner
Require.js, Bower, Component.io, Grunt.js, Browserify,
ECMAScript 6 modules… etc.
Good Infrastructure
Unit Tests
Why and How.
Why to Write Unit Tests?
If you don't know why, don't write them!
How to Structure Unit Tests
Arrange, Act, Assert.
Human
sorry, no patterns for that
Except…
Don't cheat and have fun.
Thank you
daniel.steigerwald.cz
Upcoming SlideShare
Loading in...5
×

Huge web apps web expo 2013

1,326

Published on

Apps with millions lines of code maintained by hundreds of SWEs. Can vanilla JS + HTML5 do the job? If not, what can? TypeScript? Dart?

0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,326
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
18
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Huge web apps web expo 2013

  1. 1. Huge Web Apps daniel.steigerwald.cz
  2. 2. ● independent software gardener ● web applications consultant and trainer ● Google Developer Expert ● libertarian svobodni.cz About Me
  3. 3. What is a Huge App?
  4. 4. sooner or later The Pain.
  5. 5. Symptoms ● fixing bugs creates new bugs ● rotten code ● developers paralyzed by fear ● technical debts ● reinventing the wheel ● perpetual rewriting = stress driven development
  6. 6. Remedies ● optional static typing ● user interface frameworks ● clean code ● clean architecture ● good infrastructure ● unit tests ● senior developers :-)
  7. 7. Optional Static Typing dynamic versus static
  8. 8. Keeping Your Code in Check! Make it hard to do the wrong thing.
  9. 9. Makes code more readable. function(duck) { // which duck? duck.quack(); }
  10. 10. Makes code more robust. function(duck) { duck.quack(); // does quack? }
  11. 11. No JavaScript? The king is dead, long live the king!
  12. 12. Closure, Dart, TypeScript Born to be wild tamed.
  13. 13. Google Closure That's how Google build apps.
  14. 14. function fn(duck) { duck.quack(); }
  15. 15. /** * @param {Duck} duck */ function fn(duck) { duck.quack(); }
  16. 16. Dart That's how Google will build apps.
  17. 17. fn(duck) { duck.quack(); }
  18. 18. fn(Duck duck) { duck.quack(); }
  19. 19. TypeScript Microsoft did the right thing.
  20. 20. function(duck) { duck.quack(); }
  21. 21. function(duck: Duck) { duck.quack(); }
  22. 22. github.com/borisyankov/DefinitelyTyped fixing legacy code
  23. 23. 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
  24. 24. User Interface Beyond the jQuery Backbone.
  25. 25. Why Backbone is not enough? It doesn’t aspire to be anything more than a lightweight library for models and collections.
  26. 26. Why Backbone is not enough? Default Backbone view is simply too simple.
  27. 27. todomvc.com
  28. 28. Handlebars, Mustache, Underscore templates, Dust, Jade and many others... HTML templates based only on string concatenation are obsolete.
  29. 29. Don't hold state in DOM. Use DOM only as app state projection.
  30. 30. Partial DOM updates sucks. this.$('#filters li a') .removeClass('selected') .filter('[href="#/' + (app.TodoFilter || '') + '"]') .addClass('selected');
  31. 31. Say no to boilerplate code. especially for view updates
  32. 32. Angular, Ember, React view updates done well
  33. 33. /** @jsx React.DOM */ var HelloMessage = React.createClass({ render: function() { return <div>{'Hello ' + this.props.name}</div>; } }); React.renderComponent(<HelloMessage name="John" />, el); Facebook React
  34. 34. 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
  35. 35. 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
  36. 36. Angular/Ember vs. React <HTML> vs. code()
  37. 37. Angular/Ember vs. React Declarative programming doesn't work. Sooner or later, all declarative languages ended up Turing- complete, even HTML+CSS.
  38. 38. Separating your markup and logic, that’s not real separation of concerns. That’s separation of technologies. React Great Idea
  39. 39. Angular vs. React server render ready* SVG/VML/Canvas render ready Wolfenstein render ready** * no, Phantom.js is not a solution, it's hideous hack ** www.petehunt.net/wolfenstein3D-react/wlf3d.html
  40. 40. React/Angular + Backbone separate model from view
  41. 41. Clean Code and Architecture
  42. 42. The Fewer Magic the Better explicit code over clever code
  43. 43. How to Structure App? By features. Always.
  44. 44. /controllers /directives /services /filters /views /enumerations /classes /wtf's? Wrong
  45. 45. /users /products /orders /controller.js /model.js /collection.js /process.js /delegate.js Good
  46. 46. Ensure you have a good style, good source code style. JSHint, Coffeelint, Closure Lint (for code style nacist)
  47. 47. SOLID Homework Single responsibility, Open-closed, Liskov substitution, Interface segregation and Dependency inversion. en.wikipedia.org/wiki/SOLID_(object-oriented_design) cleancoders.com
  48. 48. MVC man versus controller
  49. 49. Separated Model Always.
  50. 50. 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
  51. 51. Components or Views?
  52. 52. Dependency Injection or as it's also known, passing arguments
  53. 53. Service Locator code coupling FML
  54. 54. How to test this? function fire() { Wolf.sound.play(); ... }
  55. 55. Is sound instance ready? function fire() { Wolf.sound.play(); ... }
  56. 56. Better. function fire() { this.sound.play(); ... }
  57. 57. Fine Service Locator code coupling FTW!
  58. 58. // side effects free Math.abs x // intentionally coupled code new Coordinate x, y // constants Math.PI Fine Service Locators
  59. 59. Angular developers can check Facebook now. App Logic and App Wiring Separation
  60. 60. Good Infrastructure package management, module loader, source code linter, task runner
  61. 61. Require.js, Bower, Component.io, Grunt.js, Browserify, ECMAScript 6 modules… etc. Good Infrastructure
  62. 62. Unit Tests Why and How.
  63. 63. Why to Write Unit Tests? If you don't know why, don't write them!
  64. 64. How to Structure Unit Tests Arrange, Act, Assert.
  65. 65. Human sorry, no patterns for that
  66. 66. Except… Don't cheat and have fun.
  67. 67. Thank you daniel.steigerwald.cz
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×