article

hanselminutes #383

  1. ] LJ - hanselminutes podcast# 383 - enough of javascript already
    1. ] discussion on front end web development and the smarter use of javascript. he advocates that developers use fewer libraries and write smarter JS. Where do we start? What are the four opportunities to load JavaScript? Is Progressive Enhancement still the right solution? Aren't we supposed to be writing MORE JavaScript? Nicholas educates Scott on all the right moves when writing front ends on today's web.
    2. ] MISTAKE - using JS to render all the html for the entire page, 
      1. ] use JS to manipulate elements on page once it has been fully loaded 
    3. ] first load
      1. ]  
    4. ] 1000+ js libraries
      1. ] 
    5. ] there is no 1 write way to do things
      1. ] 
    6. ] web is going in cycles, 
      1. ] flash was IT, then b/c of the size of the binary downloads, ... - devs moved away from it  
      2. ] but now web app's JS files(dloads) are getting so large that its impacting site performance(especially on mobile) 
    7. ] avoiding duplication of writing SAME js for server and client
    8. ] you dont need to do everything ins JS , if it's possible to do something in HTML, do it in HTML
      1. ] if its possible in CSS do it in CSS
      2. ] if its possible in SERVER, do it in
      3. ] if its NOT possible on the above, then do it in JS
    9. ] example client side functionality for, dont go back to server to 'sort' a long list for example, 
      1. ] sorting -
      2. ] searching withing results -
      3. ] type ahead - ? 
      4. ] ...
    10. ] JS libraries 
      1. ] many developers fall into trap of "whats the best library" to do this, instead of whats the 'best way' to do this
      2. ] with libs like jq and jq plugin's its easy to do this... just google 'desired functionality', and then add/yet another js plugin 
      3. ] prb with libs like jquery and backbone is that the abstraction leads to devs not understanding the JS 
    11. ] it's good to know what JS is doing under the hood
      1. ] instead of automatically doing stuff with library try to do stuff in pure js, maybe you dont even need a library, 
      2. ] this will also help to give you a better understanding of js
    12. ] there are four(4) JS load times, yep, theres 4 ?, when to load the 'particlular js' , what do you need, when do you need it
      1. ] head tag ( minimal, don't put a lot of js in here, )
      2. ] before closing body tag - (browser can render page content while js is loading, user is not 'waiting' whilst looking at a blank page)
      3. ] after window.onload() - secondary or tertiary action ( something a user 'might' do on page, ex 'search' when viewing a product page   )
      4. ] on demand - use (any)trigger to load in js for a particular function, you need to know what functionality users of a site are using, 
    13. ] people arent using metadata enough, use HTML attributes to carry state data VS using js 
      1. ] can use metadata to set state, then use JS to monitor/change
      2. ] element attribute(s) 
      3. ] js widgets mimic / track element by creating SHADOW DOM
      4. x] let html do some of the heavy lifting, 
      5. ] the DOM is essentially a data structure, 
      6. ] qrying the DOM to get values is not expensive
      7. ] touching the DOM , concerns about the (performance) cost of = , ex 
    14. ] ex github - pg view / repo
      1. ] using html5 pushstate and pop state to reload parts of pages that dont change, vs pulling down the whole page
    15. ] VIDEO - talk 

 

Enough with the Javascript already

  1. ] dark chocolate covered almonds are fantastic
    1. ] they are great, but we dont want them all the time and everywhere we go .. 
  2. ] web apps are comrised of primarily
    1. ] server side - 
    2. ] html - 
    3. ] css - 
    4. ] js - 
  3. ] trend is that developers are moving everything to ..
    1. ] JS 
    2. ] JS is the most difficult and time consuming(&expensive) to maintain, makes sense to use less of it 
  4. ] example - popular sites
    1. ] avg = 187kb gzipped js - approx 600 kb unzipped
  5. ] progressive enhanement still works
    1. ] serve up html
    2. ] add js to manipulate the  
  6. ] 4x to load JS
    1. ] head - 
Details Photos Edit more

Details

ID: 1646

NAME: REVIEW-podcast-hanselminutes-383

DESCRIPTION: ] discussion on javascript 'front end development' with 'Nicholas Zakas' of Box ...

AUTHOR: article.author/s

EDITOR: article.editor/s

PUBLISHER: article.publisher/s

STATUS: Write

PRIORITY: -5

OWNER ID: 75

Content Photos Edit more

photos

page_photo

actions

Email Email-Owner SMS and