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
98
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
testingを眺める
matumoto
1
130
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
120
AIエージェント開発、DevOps and LLMOps
ymd65536
1
370
AIコーディングAgentとの向き合い方
eycjur
0
250
レガシープロジェクトで最大限AIの恩恵を受けられるようClaude Codeを利用する
tk1351
4
1.5k
🔨 小さなビルドシステムを作る
momeemt
2
630
AI OCR API on Lambdaを Datadogで可視化してみた
nealle
0
220
AIを活用し、今後に備えるための技術知識 / Basic Knowledge to Utilize AI
kishida
11
2.8k
フロントエンドのmonorepo化と責務分離のリアーキテクト
kajitack
2
150
HTMLの品質ってなんだっけ? “HTMLクライテリア”の設計と実践
unachang113
0
100
個人軟體時代
ethanhuang13
0
280
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
350
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Optimizing for Happiness
mojombo
379
70k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
Speed Design
sergeychernyshev
32
1.1k
Become a Pro
speakerdeck
PRO
29
5.5k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Unsuck your backbone
ammeep
671
58k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
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/