-
Notifications
You must be signed in to change notification settings - Fork 0
/
szegedTech.html
300 lines (262 loc) · 15.2 KB
/
szegedTech.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
<!doctype html>
<html lang="hu">
<head>
<meta charset="utf-8">
<title>Ötvös Richárd: JavaScript frameworkok a gyakorlatban</title>
<meta name="description" content="Miért használnánk JavaScript Frameworkoket és mik a lehetőségeink?">
<meta name="author" content="Hakim El Hattab">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/pulilab.css" id="theme">
<!-- For syntax highlighting -->
<link rel="stylesheet" href="lib/css/zenburn.css">
<style type="text/css">
.left-aligned{
text-align: left;
}
.space-above{
margin-top: 5%;
}
#pulilab {
/*height: 80%;*/
}
#pulilab img {
width: 210px;
margin: 0px;
border: 1px solid transparent;
}
#pulilab .container {
min-height: 530px;
}
</style>
<!-- If the query includes 'print-pdf', use the PDF print sheet -->
<script>
document.write( '<link rel="stylesheet" href="css/print/' + ( window.location.search.match( /print-pdf/gi ) ? 'pdf' : 'paper' ) + '.css" type="text/css" media="print">' );
</script>
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section>
<h2>Javascript keretrendszerek a gyakorlatban</h2>
<p>
<small><a href="https://github.com/RichardOtvos">Ötvös Richárd</a> / <a href="http://pulilab.com">Pulilab Kft</a></small>
</p>
</section>
<section id="pulilab">
<h2>Kik is vagyunk?</h2>
<div class="container">
<img src="img/python-logo.gif" alt="" class="python">
<img src="img/ios-logo.png" alt="" class="ios">
<img src="img/Backbone_logo_logo_only.png" alt="" class="backbone">
<img src="img/HTML5_Logo_512.png" alt="" class="html5">
<img src="img/android_vector.png" alt="" class="android">
<img src="img/java.png" alt="" class="java">
<img src="img/javascript_logo.png" alt="" class="js">
<img src="img/sysadmin-hero.png" alt="" class="sysop">
<img src="img/django.png" alt="" class="django">
<img src="img/nodejs.png" alt="" class="nodejs">
</div>
</section>
<section>
<section>
<h2>Egy kis motiváció...</h2>
<p>avagy <br/> "Miért akarunk mi JavaScript-ben bármit is fejleszteni?"</p>
</section>
<section>
<h3>Minek fejlesztenék JavaScript-ben, amikor...</h3>
<ul>
<li>már nagyon jól ismerek egy másik nyelvet?</li>
<li>nem is igazi programozási nyelv?</li>
<li>nem is igazi objektum orientált nyelv?</li>
<li>csak csilli-villi animációkat csinálnak benne?</li>
<li>csak a baj van vele?</li>
</ul>
</section>
<section>
<h3>A JS jó részei</h3>
<ul>
<li>Nagyon megengedő nyelv</li>
<li>Hihetetlenül gyors mértékben fejlődik</li>
<li>Sok felhasználó = sok library és könnyű segítséget találni</li>
<li>Douglas Crockford:</li>
<blockquote>
In JavaScript, there is a beautiful, elegant, highly expressive language that is buries undera steaming pile of good intentions and blunders.
</blockquote>
</ul>
</section>
<section>
<h3>A gyakorlatban</h3>
<ul>
<li>Sok nagyméretű projekt</li>
<li><a href="http://en.wikipedia.org/wiki/List_of_JavaScript_libraries">Sok libary</a> ami megkönnyíti a kód összekötését a backenddel</li>
<li>A webapplikációk gyors elterjedése</li>
<li><a href="http://www.w3counter.com/globalstats.php">Szinte mindenki</a> képes JS-et futtatni a gépén</li>
</ul>
<p></p>
<p class="left-aligned space-above">Megnőtt az igény a komplex webapplikációk iránt. Ezeknek a gyors fejlesztéséhez és könnyű karbantartásához azonban szükségünk van egy kis segítségre:</p>
<p> <strong>MVC</strong> </p>
</section>
</section>
<section>
<section>
<h1>MVC</h1>
<p class="left-aligned">A back-end oldalról ismerős lehet, de <strong>a kliens oldali és a backend oldali MVC általában nem egyezik meg.</strong></p>
<p class="left-aligned">A frameworkok-ben általában megtalálható Model és View, de a View nem a klasszikus szerepét tölti be, és kevés helyen van Controller, ezért <strong>hívjuk ezeket inkább <a href="http://addyosmani.com/blog/digesting-javascript-mvc-pattern-abuse-or-evolution/"> MV*</a> frameworkoknek</strong></p>
</section>
<section>
<h1>MV*</h1>
<p class="left-aligned">Néhány elem megtalálható az MV* frameworkok többségében.<br>Ezek:</p>
<ul>
<li><strong>Model:</strong> Tárolja az adatszerkezeteinket</li>
<li><strong>View:</strong> UI <em>és</em> interakció</li>
<li><strong>Collection:</strong> Modellek egy csoportja</li>
<li><strong>Router:</strong> Az URL-eket képezi le az egyes funkciókra</li>
</ul>
</section>
</section>
<section>
<section>
<h2>Frameworkok összehasonlítása</h2>
<p class="left-aligned">Ha ennyi féle MV* framework van, hogyan választhatom ki a nekem megfelelőbbet?</p>
<p class="left-aligned">Az egyszerűbb programokat szinte bármelyik népszerűbb MV* segítségével elkészíthetjük, de
van pár tényező ami befolyásolhatja a döntésünket:</p>
<ul>
<li>Dokumentáció minősége</li>
<li>Mennyire mature a framework?</li>
<li>Teszteltség és tesztelhetőség</li>
<li>Hogy néz ki a kód?</li>
</ul>
</section>
<section>
<h1>TODO MVC</h1>
<p><a href="http://addyosmani.github.com/todomvc/">Hivatalos oldal</a> | <a href="https://github.com/addyosmani/todomvc">Github oldal</a></p>
<p class="left-aligned">Ugyanaz az applikáció, de más frameworkokkel + jQuery + vanilla JS</p>
<p class="left-aligned">Az alapvető különbségeket jól lehet látni</p>
<p class="left-aligned">De mi van, ha ennél is többre vagyunk kíváncsiak?</p>
</section>
</section>
<section>
<h1>Napimenü</h1>
<p><a href="https://github.com/nagyv/napimenu">Github</a></p>
<p class="left-aligned">Szerettük volna tudni, melyik JS framework alkalmas az egyik projektünkre.</p>
<p class="left-aligned">A TODO MVC által bemutatottak sajnos kevésnek bizonyultak. Amire nekünk szükségünk lett volna még:</p>
<ul>
<li>Dinamikusan változó nézetek</li>
<li>Szinkronizáció a backenddel</li>
<li>Könnyű karbantarthatóság</li>
</ul>
</section>
<section>
<h1>jQuery</h1>
<p><a href="http://jquery.com/">Honlap</a> | <a href="https://github.com/nagyv/napimenu/blob/develop/frontends/jquery/src/app.js">Napimenü Github</a> </p>
<p><q>Nem kell nekünk semmilyen framework, meg tudom én ezt írni jQueryvel is!</q></p>
<p><strong><em>De kell!</em></strong></p>
<ul>
<li>Össze-vissza callback kódok</li>
<li>Minden 1 fájlban</li>
<li>Nehéz karbantartani a templateket</li>
<li>Nehéz a DOM-ot szinkronban tartani a "modellünkkel"</li>
<li>Rémálom karbantartani</li>
</ul>
</section>
<section>
<section>
<h1>Knockout</h1>
<p><a href="http://knockoutjs.com/">Honlap</a> | <a href="https://github.com/nagyv/napimenu/blob/develop/frontends/knockout/src/app.js">Napimenü github</a></p>
<ul>
<li>Nincs dependency</li>
<li>2-way data-binding</li>
<li>MVVM pattern</li>
<li>Atomata UI refresh</li>
<li>Beépített templating</li>
<li>Nagyon jó tutorial</li>
<li>A modellek kezelése nem jól megoldott</li>
</ul>
</section>
</section>
<section>
<section>
<h1>Backbone-Marionette</h1>
<p><a href="http://backbonejs.org/">Honlap</a> | <a href="http://marionettejs.com/">Marionette</a> | <a href="https://github.com/nagyv/napimenu/tree/develop/frontends/backbone-marionette/src">Napimenü github</a></p>
<h2>Backbone</h2>
<ul>
<li>Minimalista MV* framework</li>
<li>Gyorsan tanulható</li>
<li>Sok döntést a userre hagy</li>
</ul>
</section>
<section>
<h2>Marionette</h2>
<p>Különböző, gyakran használt elemek megvalóítása a Backbone-hoz.</p>
<ul>
<li>Eseménykezelés</li>
<li>Különböző, gyakran használt view típusok</li>
<li>Modulok kezelése</li>
<li>Viszonylag sok depenency</li>
</ul>
</section>
<section>
<h1>AMD</h1>
<p><a href="http://requirejs.org/docs/whyamd.html#purposes">Aszinkron modul definíció</a> | <a href="http://requirejs.org/">Require.js</a> </p>
<ul>
<li>Hova rakjuk a script taget, hogy az biztosan betöltődjön?</li>
<li>Szeretnénk szétbonani a kódot több fájlra, de mi van, ha az egyik
kód a másikra épül?</li>
<li>Jó lenne, ha nem szennyeznénk a global namespacet</li>
</ul>
<p></p>
</section>
<section>
<h1>AMD (folyt.)</h1>
<p class="left-aligned space-above">Ilyenkor jön jól az AMD. A kódot több modulra darabolhatjuk, és ezek között megadhatunk függőségeket is.</p>
<p class="left-aligned space-above">Az egész app indítása egy main.js fileból történik, így könnyebb átlátni a program működését, a modulok karbantartása pedig sokkal egyszerűbb, mint 1 db hatalams fájlé. </p>
</section>
</section>
<section>
<h1>Köszönöm a figyelmet!</h1>
<p class="space-above"><strong><a href="mailto:work@pulilab.com">work@pulilab.com</a></strong></p>
</section>
</div>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.min.js"></script>
<script>
// Full list of configuration options available here:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/none
// Optional libraries used to extend on reveal.js
dependencies: [
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'plugin/markdown/showdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
{ src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
]
});
</script>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.isotope.min.js"></script>
<script type="text/javascript">
Reveal.addEventListener( 'slidechanged', function( event ) {
// event.previousSlide, event.currentSlide, event.indexh, event.indexv
if (event.indexh === 1) {
$('#pulilab .container').isotope({
itemSelector: 'img',
});
}
} );
</script>
</body>
</html>