Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Modern Web Applications

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →

Modern Web Applications

Talk taken during the research of building modern web applications with JavaScript.

Avatar for Sławomir Chrobak

Sławomir Chrobak

July 01, 2013

Other Decks in Programming

Transcript

  1. What is modern design? Responsive Layouts Fixed Header Bars Large

    Photo Backgrounds CSS Transparency Infinite Scrolling Homepage Feature Tours Fullscreen Typography API & Open Source CSS3 Animations Single-Page Web Design
  2. Why not?! ExtJS is like a superset of the widgets

    Tutorials, samples and user community RIA framework Good code quality/readability Amazing set of widgets, does everything we could possibly want Footprint - The library is 500 KB in size CSS – very easy to get lost HTML – full of divs and overly complex generated code Dual licensed Customization is not easily achievable Loading even simple things requires few lines of coding Debugging is not very easy Objects are rendered by DOM Need quite experienced developer
  3. Pros and Cons Simple to use Cross Browser-Compability A lot

    of features easy to use Great documentation Responsive CSS Bunch of javascript plugins Packed with other features. Including bootstrap and getting it to work with your current website is a pain in the ass if the css tags conflict Harder to be original
  4. JSHint is a community-driven tool to detect errors and potential

    problems in JavaScript code and to enforce your team’s coding conventions.
  5. grunt.loadNpmTasks('grunt-­‐contrib-­‐uglify'); grunt.loadNpmTasks('grunt-­‐contrib-­‐jshint'); grunt.loadNpmTasks('grunt-­‐contrib-­‐watch'); grunt.loadNpmTasks('grunt-­‐contrib-­‐concat'); grunt.loadNpmTasks('grunt-­‐contrib-­‐copy'); Why use a task runner?

    In one word: automation. The less work you have to do when performing repetitive tasks like minification, compilation, unit testing, linting, etc, the easier your job becomes. After you've configured it, a task runner can do most of that mundane work for you—and your team—with basically zero effort.
  6. Modular JavaScript RequireJS is a JavaScript file and module loader.

    It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code.
  7. The goals All state/models for your app should live in

    one place. Any change in that model should be automatically reflected in the UI, whether that's in one place or many. Clean/maintainable code structure. Writing as little "glue code" as possible.
  8. Backbone & Underscore Models, Collections, Views Do not store data

    in DOM! Events Backbone.sync Nested Models & Collections Client-side Templates (sic!) Extracted from Rails 80-odd functions Does’t extend standard JavaScript objects We need this? YES!