Webové aplikácie
- Nárast počtu webových aplikácií
- Presúvanie logiky na front-end
- Dôraz na UX, malý response time
- Vznik SPA - single page application
SPA
- Komplikovanie kódu na front-ende
- organizácia kódu
- manipulácia s DOM
- interakcia s používateľom
- Vznik JavaScript frameworkov
JavaScript frameworky
- organizácia kódu
- znovupoužiteľnosť - komponenty
- šablóny - vykresľovanie html
Ember
- Open-source
- Prvý commit - 30. apríl 2011
- Veľká komunita
- 15,894 stars na Githube
- Neustály vývoj
- Ale významne menej používaný ako ostatné JS frameworky
Title Text
- Bullet One
- Bullet Two
- Bullet Three
Architektúra
aplikácie
Template
- Šablóna používateľského rozhrania
- Html
- {{handlebars}}
- Dynamické generovanie obsahu stránky
<html>
<head>
<title>Emberjs Template</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.10.0/ember.min.js"></script>
<script src="http://builds.emberjs.com/tags/v1.10.0-beta.3/ember-template-compiler.js"></script>
<script src="http://builds.emberjs.com/release/ember.debug.js"></script>
<script src="http://builds.emberjs.com/beta/ember-data.js"></script>
</head>
<body>
<script type="text/x-handlebars" data-template-name="application">
<!-- name of the template is application and it is default template -->
<div>
{{outlet}}
</div>
</script>
</body>
</html>Component
- UI Widget
- Špeciálny typ template-u
- components/ + názov
<script type="text/x-handlebars" data-template-name="index">
<h2>Using setupController function:</h2>
{{content}}
</script>
<script type="text/javascript">
App = Ember.Application.create();
App.IndexRoute = Ember.Route.extend({
//set up the controller and its content
setupController: function(controller) {
controller.set('content','Welcome to Tutorials Point');
}
});
</script>Router
- Preklad URL na template-y
- Aktuálnosť URL
- Parsuje query parametre
- Rieši chyby
Model
- Perzistencia
- Viazaný na konkrétnu cestu (route)
- Zobrazený pomocou template-ov
- Umožňuje cache
Controller
- definuje interakcie s template-om
- poskytuje template-om dáta
<script type="text/x-handlebars" data-template-name="index">
<h2>Using setupController function:</h2>
{{content}}
</script>
<script type="text/javascript">
App = Ember.Application.create();
App.IndexRoute = Ember.Route.extend({
//set up the controller and its content
setupController: function(controller) {
controller.set('content','Welcome to Tutorials Point');
}
});
</script>Kto používa Ember
- Travi CI
- Yahoo
- Vine
- ...
http://emberjs.com/ember-users/
Ember
By patrikgallik
Ember
Small presentation about ember
