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
150
NodeJS Intro - @JsZgb Meetup #1
tomislavcapan
0
97
Full-stack JavaScript Development (rev. 2013)
tomislavcapan
1
68
Asp.Net - Spark View Engine
tomislavcapan
0
48
Git tooling za Windows developere
tomislavcapan
0
84
Razvoj u distribuiranim timovima uz Kanban i Trello
tomislavcapan
0
300
Other Decks in Programming
See All in Programming
テスト駆動Kaggle
isax1015
1
480
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
930
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
2
20k
フロントエンドのパフォーマンスチューニング
koukimiura
4
1.5k
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
1
150
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
300
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
96
33k
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
230
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
990
ニーリーにおけるプロダクトエンジニア
nealle
0
880
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
3
150
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
190
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Unsuck your backbone
ammeep
671
58k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Making Projects Easy
brettharned
116
6.3k
Become a Pro
speakerdeck
PRO
29
5.4k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Adopting Sorbet at Scale
ufuk
77
9.5k
Balancing Empowerment & Direction
lara
1
440
Producing Creativity
orderedlist
PRO
346
40k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
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/