Modern front end development
•
5 likes•2,430 views
The document discusses the history and modern state of front-end development. It describes how front-end roles have evolved from C programmers to UX designers. Modern front-end uses HTML for content, CSS for design, and JavaScript for behavior. Key technologies include HTML5, CSS3, and JavaScript frameworks. The future of front-end development includes single page apps, native-like experiences, and further JavaScript optimization.
Report
Share
Modern front end development
- 2. Modern Front-End Development Front-End through history Front-End in Enterprise environment Modern Front-End Technology HTML5 Front-End Frameworks
- 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. From C programmer to interaction designer DTP designer C Programmer
- 5. From C programmer to interaction designer Web Designer PHP / ASP / Perl Programmer Web master
- 6. From C programmer to interaction designer Web Designer Front-End Developer Back-End Developer End User
- 7. From C programmer to interaction designer Information Architect Interaction Designer UX Designer Web Designer Front-End Developer Back-End Developer Web Maseter
- 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. 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
- 11. Modern Front-End Content Structure - HTML Design - CSS Behaviours - JavaScript
- 12. Modern Front-End Responsive (Blivakker, Rhapsody) Adaptive (vecernji.hr) Content Coreografy Content Owners & Webmaster Content is a king - Not
- 13. Modern Front-End Semantics Separation of concerns Progresive enhancements Degradation gracefuly
- 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. <!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. 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. CSS v3 Physical Design Selectors (id, class, pseudo, attributes) Box Model
- 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 { … }
- 20. CSS v3 Physical Design Selectors (id, class, pseudo, attributes) Box Model
- 21. 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
- 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. 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
- 24. More Semantic Rich API HTML5 New Controls Form Validations … Not only HTML
- 27. 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)
- 28. 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 …)
- 29. Canvas 2D Text, Path, Elipse, API, Colisions detection, Bledning, Image export formats, SVG Graphic eNotebook WebGL 3D acko.net
- 30. Server-Sent Events Connectivity WebSockets XMLHttpRequest L2 (upload files)
- 32. Application cache IndexDB WebSQL Offline & Storage Local Storage File API Aida, eNotebook
- 33. Drag and drop HTML editing Performance & integration Spellcheck Web Workers Sandboxed iframe
- 35. real life
- 43. <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();
- 44. .tabs {…} .tabs .tab {…} .tabs a:link:before { animate … } .tabs a:link:before { background … rotate … } .tabs a:link:after { border … rotate … }
- 45. "use strict"; var tabs = (function(window, document, undefined) { var _init = function() { ... }; return { init: _init } })(this, this.document); ! … ! tabs.init();
- 46. real life
- 47. 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 …
- 48. For the future Web platform & native apps Javascript patterns and optimization Single Page Apps Front-End FTW