Building happy web applications

300
-1

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
300
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • 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

    1. 1. Building Happy Web Applications Elan Hami Frontend Framework Team LivePerson
    2. 2. Elan Hami Frontend Developer here @ LivePerson Developing client-side projects for ~4 years elanh@liveperson.com
    3. 3. Most new applications today are: • Mobile/Tablet apps (i-*, Android, etc.) • Web apps • Single-page apps • With JavaScript
    4. 4. 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
    5. 5. But, you CAN be happy Happy (hap·py, adj., ˈha-pē): • in software design - 1. Makes you happy today 2. Keeps future you happy
    6. 6. How?
    7. 7. Stop treating client as “dumb”
    8. 8. Client can’t do everything • Some things are solely for server • Security • Authentication & authorization • Actual input validation • Persistence to (non client) data-storage But…
    9. 9. 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
    10. 10. OK, but how do I solve those issues?
    11. 11. Apply well known design principles
    12. 12. Modularity
    13. 13. Separation of concerns
    14. 14. Composition
    15. 15. I like those concepts, but it’s hard in JavaScript!
    16. 16. Choose an MV* provider (or build one)
    17. 17. Why?
    18. 18. Modularity
    19. 19. Separation of concerns
    20. 20. Composition
    21. 21. 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?!)
    22. 22. 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" }
    23. 23. 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
    24. 24. Don’t be afraid to make mistakes
    25. 25. Use the right tools
    26. 26. •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)
    27. 27. Questions?
    28. 28. 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/
    29. 29. Q&A peoplejobs@liveperson.com Want to work on cool stuff like this?
    1. A particular slide catching your eye?

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

    ×