Post on 20-May-2015
description
Modern Front-End
Development
Tomislav Mesić @tomislavmesic 5minuta
Modern Front-End
Development
Front-End through history Front-End in Enterprise environment Modern Front-End Technology HTML5 Front-End Frameworks
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
From C programmer
to interaction designer
DTP designer C Programmer
From C programmer
to interaction designer
Web Designer PHP / ASP / Perl Programmer Web master
From C programmer
to interaction designer
Web Designer Front-End Developer Back-End Developer End User
From C programmer
to interaction designer
Information Architect Interaction Designer UX Designer Web Designer Front-End Developer Back-End Developer Web Maseter
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
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
Modern Front-End
Content Structure Design Behaviours
Modern Front-End
Content Structure - HTML Design - CSS Behaviours - JavaScript
Modern Front-End
Responsive (Blivakker, Rhapsody) Adaptive (vecernji.hr) Content Coreografy Content Owners & Webmaster Content is a king - Not
Modern Front-End
Semantics Separation of concerns Progresive enhancements Degradation gracefuly
HTMLMarkup Language SGML (Standard Generalized Markup Language) Logical Design HTML 2 - Structure & Content HTML 3 - HTML Styles HTML 4 - SoC, CSS, XHTML HTML 5
<!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>
HTMLMarkup Language SGML (Standard Generalized Markup Language) Logical Design HTML 2 - Structure & Content HTML 3 - HTML Styles HTML 4 - SoC, CSS, XHTML HTML 5
CSSv3 Physical Design Selectors (id, class, pseudo, attributes)
Box Model
p {color: #000}!.teaser {float: left}!#logo {…}!a:link { display: block; background: #ccc; color: #fff; }!input[type=checkbox]:checked { … }input[type=checkbox]:checked + label { … }
CSSv3 Physical Design Selectors (id, class, pseudo, attributes)
Box Model
JavaScriptInterpreter, 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
Communication & Data Devices & Printing
WinRT APIs
Graphics & Media
Desktop Apps
C C++
Win32
C# VB
.NET
HTML JavaScript
IE
Windows Store Apps
Application Model
XAML
JavaScript
HTML / CSS
C C++
C# VB
Windows Kernel Services
Syst
em S
ervi
ces
View
Mod
el
Cont
rolle
rKe
rnel
Communication & Data Devices & Printing
WinRT APIs
Graphics & Media
Desktop Apps
C C++
Win32
C# VB
.NET
HTML JavaScript
IE
Windows Store Apps
Application Model
JavaScript
HTML / CSSXAML
C C++
C# VB
Windows Kernel Services
Syst
em S
ervi
ces
View
Mod
el
Cont
rolle
rKe
rnel
HTML5More Semantic Rich API New Controls Form Validations … Not only HTML
Graphic Semantics Storage Device Access
CSS3 Performance Multimedia Conectivity
Semantics
Section elements (section, nav, aside, sidebar,
header, footer, article …) Grouping elements (fieldset, figure)
Form elements (search, tel, url, email, date,
number, keygen, progress, meter) Form field validation (pattern, required) Microdata (data attrs, machnine language)
MultimediaVideo Video element, Codec detection, Subtitle support, DRM Support, Video formats (mpg4, h.264, Theora …)
Audio Audio element, Speech recognition & syntesis, Audio formats (pcm, aac, mp3 …)
GraphicCanvas 2D Text, Path, Elipse, API, Colisions detection, Bledning, Image export formats, SVG eNotebook
WebGL 3D acko.net
ConnectivityServer-Sent Events WebSockets XMLHttpRequest L2 (upload files)
Device access
Geolocation Device Orientation Fullscreen Webcam Vibrate
Offline & Storage
Application cache IndexDB WebSQL Local Storage File API Aida, eNotebook
Performance & integration
Drag and drop HTML editing Spellcheck Web Workers Sandboxed iframe
CSS3
Transitions 2D Transformations 3D Transforms GPU blivakker menu & flip
real life
<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();
.tabs {…}
.tabs .tab {…}
.tabs a:link:before { animate … }.tabs a:link:before { background … rotate … }.tabs a:link:after { border … rotate … }
"use strict";var tabs = (function(window, document, undefined) { var _init = function() { ... }; return { init: _init }})(this, this.document);!…!tabs.init();
real life
ModernFrameworks
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 …
For the futureWeb platform & native apps Javascript patterns and optimization Single Page Apps Front-End FTW
Modern Front-End
DevelopmentTomislav Mesić @tomislavmesic