Modern front end development

1,891 views

Published on

My view of modern front-end development based on web technologies.

Published in: Technology, Business

Modern front end development

  1. 1. Modern Front-End Development Tomislav Mesić @tomislavmesic 5minuta
  2. 2. Modern Front-End Development Front-End through history Front-End in Enterprise environment Modern Front-End Technology HTML5 Front-End Frameworks
  3. 3. Front-End through history Front-End on top of the world From C prog to interaction designer UX and modern Front-End Programers & Developers Different Front-End approaches
  4. 4. From C programmer to interaction designer DTP designer C Programmer
  5. 5. From C programmer to interaction designer Web Designer PHP / ASP / Perl Programmer Web master
  6. 6. From C programmer to interaction designer Web Designer Front-End Developer Back-End Developer End User
  7. 7. From C programmer to interaction designer Information Architect Interaction Designer UX Designer Web Designer Front-End Developer Back-End Developer Web Maseter
  8. 8. Front-End through history Front-End on top of the world From C prog to interaction designer UX and modern Front-End Programers & Developers Differences between Front-End devs
  9. 9. Front-End Enterprise & Consumer Different Approaches Consumer Blivakker, Netthandelen, Rhapsody, ripplo Bleeding Edge Enterprise HZZO, Gov, ERP, Oracle, RAD Proff Concepts 1-5 Y behind
  10. 10. Modern Front-End Content Structure Design Behaviours
  11. 11. Modern Front-End Content Structure - HTML Design - CSS Behaviours - JavaScript
  12. 12. Modern Front-End Responsive (Blivakker, Rhapsody) Adaptive (vecernji.hr) Content Coreografy Content Owners & Webmaster Content is a king - Not
  13. 13. Modern Front-End Semantics Separation of concerns Progresive enhancements Degradation gracefuly
  14. 14. HTML Markup Language SGML (Standard Generalized Markup Language) Logical Design HTML 2 - Structure & Content HTML 3 - HTML Styles HTML 4 - SoC, CSS, XHTML HTML 5
  15. 15. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Your Website</title> <link href="styles.css" rel="stylesheet"/> <script src="script.js"> </head> <body> … </body> </html>
  16. 16. HTML Markup Language SGML (Standard Generalized Markup Language) Logical Design HTML 2 - Structure & Content HTML 3 - HTML Styles HTML 4 - SoC, CSS, XHTML HTML 5
  17. 17. CSS v3 Physical Design Selectors (id, class, pseudo, attributes) Box Model
  18. 18. p {color: #000} ! .teaser {float: left} ! #logo {…} ! a:link { display: block; background: #ccc; color: #fff; } ! input[type=checkbox]:checked { … } input[type=checkbox]:checked + label { … }
  19. 19. CSS v3 Physical Design Selectors (id, class, pseudo, attributes) Box Model
  20. 20. JavaScript Interpreter, OOP, Single Tread, Script ECMAScript 5.1 Front-End Development Language Not only Front-End (Windows Store Apps, Node.js, Firefox OS, Microcontrollers like Rosbery PI and Tessel) DOM & OOP Development
  21. 21. Model Controller View Windows Store Apps HTML / CSS XAML C C++ Desktop Apps C# VB JavaScript HTML JavaScript C C++ C# VB IE Win32 .NET System Services WinRT APIs Communication & Data Graphics & Media Devices & Printing Kernel Application Model Windows Kernel Services
  22. 22. Model Controller View Windows Store Apps HTML / CSS XAML C C++ Desktop Apps C# VB JavaScript HTML JavaScript C C++ C# VB IE Win32 .NET System Services WinRT APIs Communication & Data Graphics & Media Devices & Printing Kernel Application Model Windows Kernel Services
  23. 23. More Semantic Rich API HTML5 New Controls Form Validations … Not only HTML
  24. 24. Graphic CSS3 Semantics Storage Device Access Performance Multimedia Conectivity
  25. 25. Section elements (section, nav, aside, sidebar, header, footer, article …) Grouping elements (fieldset, figure) Semantics Form elements (search, tel, url, email, date, number, keygen, progress, meter) Form field validation (pattern, required) Microdata (data attrs, machnine language)
  26. 26. Video Video element, Codec detection, Subtitle support, DRM Support, Video formats (mpg4, h.264, Theora …) Multimedia Audio Audio element, Speech recognition & syntesis, Audio formats (pcm, aac, mp3 …)
  27. 27. Canvas 2D Text, Path, Elipse, API, Colisions detection, Bledning, Image export formats, SVG Graphic eNotebook WebGL 3D acko.net
  28. 28. Server-Sent Events Connectivity WebSockets XMLHttpRequest L2 (upload files)
  29. 29. Geolocation Device Orientation Device access Fullscreen Webcam Vibrate
  30. 30. Application cache IndexDB WebSQL Offline & Storage Local Storage File API Aida, eNotebook
  31. 31. Drag and drop HTML editing Performance & integration Spellcheck Web Workers Sandboxed iframe
  32. 32. Transitions 2D Transformations CSS3 3D Transforms GPU blivakker menu & flip
  33. 33. real life
  34. 34. <ol class="tabs"> <li><a href="#tab-1">Tab 1</a></li> <li><a href="#tab-2">Tab 3</a></li> </ol> … <div id="tab-1">…</div> <div id="tab-2">…</div> … $("tabs").tabs();
  35. 35. .tabs {…} .tabs .tab {…} .tabs a:link:before { animate … } .tabs a:link:before { background … rotate … } .tabs a:link:after { border … rotate … }
  36. 36. "use strict"; var tabs = (function(window, document, undefined) { var _init = function() { ... }; return { init: _init } })(this, this.document); ! … ! tabs.init();
  37. 37. real life
  38. 38. Modern
 Frameworks HTML Bootstrap, Zurb Foundation, Kendo, jQuery UI, Kickstart, Sencha … CSS 360 Grids, Less, Skeleton, Compass, Blueprint … JavaScript MV*, Backbone, Knockout, Can JS, Ember, Angular, Meteor, jQuery …
  39. 39. For the future Web platform & native apps Javascript patterns and optimization Single Page Apps Front-End FTW
  40. 40. Modern Front-End Development Tomislav Mesić @tomislavmesic

×