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š.

1. Web platform
Native apps
Tomislav Mesić

2. It's not abut
technology
The problem isn’t with the
language itself; it’s with the
way programmers use the
language
Trevor Burnham - Async JavaScript

3. What about
platform?
Stateless
Accessibility
Separation of concerns
Progressive enhancements

4. <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();

5. What about
platform?
Stateless
Accessibility
Separation of concerns
Progressive enhancements

6. Approaches
Expectations
Content is a king … not
Controls, controls, controls
Be more semantic
Popular frameworks

7. <tabs>
<tab
left-img="img-left.jpg"
right-img="img-right.jpg"
orientation="left"
action="switch()"
label="Total income" />
…
</tabs>

8. Approaches
Expectations
Content is a king … not
Controls, controls, controls
Be more semantic
Popular frameworks

10. in practice

12. <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();

13. .tabs {…}
.tabs .tab {…}
.tabs a:link:before {
animate …
}
.tabs a:link:before {
background …
rotate …
}
.tabs a:link:after {
border …
rotate …
}

14. "use strict";
var tabs = (function(window, document, undefined) {
var _init = function() {
...
};
return {
init: _init
}
})(this, this.document);
…
tabs.init();

15. in practice

16. For the future
Long time ago …
Web platform & native apps
Front-End FTW

17. Web platform
Native apps
Tomislav Mesić
@tomislavmesic