• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Building happy web applications
 

Building happy web applications

on

  • 397 views

Describes how to be build a single page application using backbone and still stay 'happy'. Best practices and guidelines.

Describes how to be build a single page application using backbone and still stay 'happy'. Best practices and guidelines.

Statistics

Views

Total Views
397
Views on SlideShare
397
Embed Views
0

Actions

Likes
0
Downloads
7
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Mix of Suspicion \ Wariness \ “No way I’m getting into that”
  • It makes me sad tooLet’s face it, we have a lemon
  • But we can make lemonade
  • Makes me happy that we have all these challenges!
  • Approach client side coding as engineering problemTreat it as something that can challenge your intellect
  • Single responsibility & IndependenceBreaking down problemsEasily interchangeable and maintainable1 class per fileCommunication through eventsMakes me happy!
  • Each module should deal with a specific problemDifferent module types for different problems – Data VS VisualAllows independent developmentLayersEncapsulationMakes me happy!
  • Combine simple objects to solve complex issuesReuse componentsSolve problems onceFix problems onceMakes me happy!
  • You are right, but we won’t let that stop our pursuit!
  • It doesn’t matter whichJust choose oneOr build one yourself
  • You are right, but we won’t let that stop our pursuit!
  • Every object (Model, View, Controller) has a single responsibility and problem setThey are independent (multiple views can be developed over 1 model)Break down problems like API communication and Browser quirks Easy to replace your View without touching the data modelEach object can be written in a separate file – Use dependency management and buildEvent driven architecture – loose couplingMakes me happy!
  • Models deal with data/APIs, Views deal with Presentation/DOM events, Controllers deal with Business LogicAllows independent developmentLayers – Lasagna codeEncapsulation of complicated data manipulationMakes me happy!
  • Don’t look at pages as one large thingBreak down to UI components with easy interfaceCombine Components to create a page – fast, consistent developmentReuse componentsSolve problems onceFix problems onceMakes me happy!
  • Once you chose – learn how to useDon’t lose the excitementYou will see that you start applying the correct design patterns
  • Don’t look at pages as one large thingBreak down to UI components with easy interfaceCombine Components to create a page – fast, consistent developmentReuse componentsSolve problems onceFix problems onceMakes me happy!

Building happy web applications Building happy web applications Presentation Transcript

  • Building Happy Web Applications Elan Hami Frontend Framework Team LivePerson
  • Elan Hami Frontend Developer here @ LivePerson Developing client-side projects for ~4 years elanh@liveperson.com
  • Most new applications today are: • Mobile/Tablet apps (i-*, Android, etc.) • Web apps • Single-page apps • With JavaScript
  • JavaScript can make you sad • No compiler – hard to trace basic “errors” • Multiple runtime environments • Hard to make sense of • Hard to maintain – very lenient, easy to abuse • No isolation – everything runs together • OO aspects can be misleading or missing • The Bad Parts by Douglas Crockford http://oreilly.com/javascript/excerpts/javascript- good-parts/bad-parts.html
  • But, you CAN be happy Happy (hap·py, adj., ˈha-pē): • in software design - 1. Makes you happy today 2. Keeps future you happy
  • How?
  • Stop treating client as “dumb”
  • Client can’t do everything • Some things are solely for server • Security • Authentication & authorization • Actual input validation • Persistence to (non client) data-storage But…
  • Doesn’t mean they’re simple • Clients should be smart in their domain: • Handle navigation flows (single page) • Manipulate data models • UI logic and presentation • i18n • Sync data from multiple APIs • Allow to work offline Client side challenges are major and need a serious attitude
  • OK, but how do I solve those issues?
  • Apply well known design principles
  • Modularity
  • Separation of concerns
  • Composition
  • I like those concepts, but it’s hard in JavaScript!
  • Choose an MV* provider (or build one)
  • Why?
  • Modularity
  • Separation of concerns
  • Composition
  • Using Your Library • Learn it • Understand what it provides • Keep learning it – not just the basics • Evolve your code patterns with it • Remember moving from Vanilla JS to jQuery? (What’s that $ doing everywhere?!)
  • Some examples With jQuery var that = this; $(".name").change(function(e){ var newVal = $(this).val(); that.changeName(newVal); }); $(".saveBtn").click(function(e){ that.save(); }); With Backbone events: { "click .saveBtn":"save", "change .name":"changeName" }
  • Some examples With jQuery var that = this; this.vent.on("myEvent", function(data){ //do something with that }); With Underscore this.vent.on("myEvent", _.bind(this.handler, this)); //in handler this is this
  • Don’t be afraid to make mistakes
  • Use the right tools
  • •Dependency management – allows separation of resources (we use require.js) –Don’t worry about too many requests –In dev we load ~500 files, in prod ~3 •JSHint/JSLint – a must (really) •Testing - QUnit, Jasmine, whatever •Build tools – use build tools for client code (r.js, grunt, yeoman)
  • Questions?
  • Further reading: http://addyosmani.com/resources/essentialjsdesignpatterns/book/ http://addyosmani.com/writing-modular-js/ http://lostechies.com/derickbailey/ http://addyosmani.com/largescalejavascript/ http://stackoverflow.com/questions/10847852/what-are-the-real-world-strengths-and- weaknesses-of-the-many-frameworks-based-on http://net.tutsplus.com/tutorials/javascript-ajax/3-reasons-to-choose-angularjs-for- your-next-project/
  • Q&A peoplejobs@liveperson.com Want to work on cool stuff like this?