web platform in the native apps world
DESCRIPTION
Koristeći web tehnologije u razvoju native/hibridnih aplikacija u nekom trenutku uvijek dolazimo do pitanja "Što nam je ovo trebalo?" no svejedno, već sa sljedećim projektom dolazimo do ideje "Ne bismo li ovo mogli razvijati na web platformi?!" i nošeni idejom "Ovaj put ćemo pametnije!" krećemo u novi pokušaj. Čini se da glavni uzrok tome zapravo nisu mogućnosti/nemogućnosti web platforme u odnosu na native platformu već jednostano način na koji pristupamo razvoju i onoga što očekujemo od platforme i razvojnih alata. Sigurno je da web platforma ne nudi sve ono što nudi native platforma no može li se to na neki način kompenzirati nekim drugim / dobrim stranama web tehnologija koje native razvojne platforme nemaju (ili se još uvijek traže po tom pitanju)? Sigurno može. Ovo je osvrt na neke konkretne koncepte razvoja web aplikacija lako primjenjivih u razvoju native/hibridnih appsa, o načinu primjene web tehnologija, pristupu u razvoju i načinu razmišljanja prilikom razvoja native/hibridnih aplikacija kako ih vidi jedan web frontendaš.TRANSCRIPT
Web platformNative apps
Tomislav Mesić
It's not abuttechnology
The problem isn’t with the language itself; it’s with the way programmers use the language
Trevor Burnham - Async JavaScript
What about platform?
StatelessAccessibilitySeparation of concernsProgressive enhancements
<noscript data-src-small="img-small.jpg" data-src-medium="img-medium.jpg" data-src-high="img-high.jpg"><img src="img-small.jpg" class="lazy" />
</noscript>…$("img.lazy").lazyLoad();
What about platform?
StatelessAccessibilitySeparation of concernsProgressive enhancements
ApproachesExpectations
Content is a king … notControls, controls, controlsBe more semanticPopular frameworks
<tabs><tableft-img="img-left.jpg" right-img="img-right.jpg"orientation="left"action="switch()"label="Total income" />…
</tabs>
ApproachesExpectations
Content is a king … notControls, controls, controlsBe more semanticPopular frameworks
in practice
<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();
in practice
For the futureLong time ago …Web platform & native appsFront-End FTW
Web platformNative apps
Tomislav Mesić@tomislavmesic