Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Full-stack JavaScript Development
Search
Tomislav Capan
November 07, 2012
Programming
3
190
Full-stack JavaScript Development
Presentation from a Code@Six Zagreb User Group held on 7th November 2012
Tomislav Capan
November 07, 2012
Tweet
Share
More Decks by Tomislav Capan
See All by Tomislav Capan
NodeJS/Express HTML / REST API Views, Routing & Controllers - @JsZgb Meetup #2
tomislavcapan
1
160
NodeJS Intro - @JsZgb Meetup #1
tomislavcapan
0
100
Full-stack JavaScript Development (rev. 2013)
tomislavcapan
1
69
Asp.Net - Spark View Engine
tomislavcapan
0
49
Git tooling za Windows developere
tomislavcapan
0
88
Razvoj u distribuiranim timovima uz Kanban i Trello
tomislavcapan
0
310
Other Decks in Programming
See All in Programming
モテるデスク環境
mozumasu
3
990
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
180
Six and a half ridiculous things to do with Quarkus
hollycummins
0
210
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
2.5k
コード生成なしでモック処理を実現!ovechkin-dm/mockioで学ぶメタプログラミング
qualiarts
0
240
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
hollycummins
0
250
Go言語はstack overflowの夢を見るか?
logica0419
0
510
Developer Joy - The New Paradigm
hollycummins
1
340
Webサーバーサイド言語としてのRustについて
kouyuume
1
3.9k
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
270
他言語経験者が Golangci-lint を最初のコーディングメンターにした話 / How Golangci-lint Became My First Coding Mentor: A Story from a Polyglot Programmer
uma31
0
330
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
nrslib
3
420
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
36
6.1k
Making Projects Easy
brettharned
120
6.4k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.7k
YesSQL, Process and Tooling at Scale
rocio
173
15k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
630
4 Signs Your Business is Dying
shpigford
185
22k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
Statistics for Hackers
jakevdp
799
220k
Agile that works and the tools we love
rasmusluckow
331
21k
The Cult of Friendly URLs
andyhume
79
6.6k
Java REST API Framework Comparison - PWX 2021
mraible
34
8.9k
Building Applications with DynamoDB
mza
96
6.7k
Transcript
Full-stack JavaScript Development alati za pomoć u razvoju JavaScript aplikacija
Krešimir Antolić (@kantolic) Tomislav Capan (@tomislavcapan)
JavaScript
Server Side • JavaScript - jezik • node.js - platforma
• express - web framework
Templating Engines • Mustache ◦ minimal; passive view • Handlebars
◦ minimal on steroids: mustache + helpers • Jade ◦ HAML-like; (pre)bogat • Underscore ◦ minimalan, dolazi uz underscore toolkit
Server Side - zaključak • Rezultat ◦ server-side website /
webapp ◦ isto kao i PHP/Ruby/Python/ASP.Net itd. • Node.js ◦ not a silver bullet
Client Side • server zadužen samo za manipulaciju podataka •
preglednik zadužen za prikaz podataka i korisničkih akcija
Client Side • 1. generacija: libraryji • 2. generacija: MV*
frameworci ◦ trenutno u fokusu • 3 generacija ◦ trenutno još fuzzy budućnost ◦ cilj: integracija
Client Side - MV* • KnockoutJs • BackboneJs ◦ +MarionetteJS
• AngularJs • EmberJs • CanJS • ...
Client Side - UX • Bootstrap • Kendo UI •
jQueryUI • YUI • ExtJs • Dojo
Modularizacija AMD - Asynchronous Module Definition • RequireJs • almond
• Curl • StealJS
Debugging • Browser tools ◦ Firefox FireBug ◦ Chrome Dev
Tools ◦ Opera DragonFly • Mobile ◦ Chrome (4+, adb) ◦ iOS 6 - Safari dev tools ◦ external (weinre, jsconsole)..
Testing • Testing ◦ Jasmine, Mocha, Chai, SinonJs ◦ CasperJs
+ PhantomJs ◦ TestSwarm • CI ◦ self-hosted: TeamCity, Jenkins ◦ SaaS: Travis CI, CircleCI
Dev tooling • Build ◦ Maven? ◦ Ručno pisane skripte?
◦ GruntJs
GruntJs - JS alati • Kvaliteta JS koda ◦ JSLint
/ JSHint • Optimizacija JS koda ◦ concatenatori ◦ minifieri ◦ uglifieri ◦ client-side template builderi
GruntJs - CSS alati • CSS preprocessori ◦ Less ◦
Sass • CSS minifier
GruntJs - Testing alati • Test runneri ◦ Mocha -
server-side ◦ Mocha - client-side ◦ Jasmine ◦ CasperJs / PhantomJs
GruntJs - Deployment alati • Build process ◦ clean deployment
target ◦ build - concat, lint, minify, uglify... ◦ copy assets to target ◦ run tests ◦ exec shell scripts ◦ watchers
GruntJS rulez! • uglavnom sve dostupno kao GruntJs plugin ◦
...ili će uskoro biti...
Uspjeh Batman!
Links Server Side • node.js -http://nodejs.org/ • express http://expressjs.com/ Templating
• Mustache - http://mustache.github.com/ • Handlebars - http://handlebarsjs.com/ • Jade - http://jade-lang.com/ • Underscore - http://underscorejs.org/#template Client-side libs • KnockoutJs - http://knockoutjs.com/ • BackboneJs - http://backbonejs.org/ ◦ +MarionetteJS - http://www.marionettejs.com/ • AngularJs - http://angularjs.org/ • EmberJs - http://emberjs.com/ • CanJS - http://canjs.us/
Links UX • Bootstrap - http://twitter.github.com/bootstrap/ • Kendo UI -
http://www.kendoui.com/ • jQueryUI - http://jqueryui.com/ • YUI - http://yuilibrary.com/ • ExtJs - http://www.sencha.com/products/extjs/ • Dojo - http://dojotoolkit.org/ Modularizacija: • RequireJs - http://requirejs.org/ • almond - https://github.com/jrburke/almond • Curl - https://github.com/cujojs/curl • StealJS - http://javascriptmvc.com/docs.html#!stealjs
Links Testing • Mocha - http://visionmedia.github.com/mocha/ • Chai - http://chaijs.com/
• Jasmine - http://pivotal.github.com/jasmine/ • SinonJs - http://sinonjs.org/ • PhantomJs - http://phantomjs.org/ • CasperJs - http://casperjs.org/ CI • CircleCI - https://circleci.com/ • TeamCity - http://www.jetbrains.com/teamcity/ • Travis CI - http://about.travis-ci.org/ • Jenkins - http://jenkins-ci.org/ Build • GruntJs - http://gruntjs.com/ • Brunch - http://brunch.io/