Ustream vs Legacy, It's never too late to start your fight! #Jsist 2014
-
Upload
mate-nadasdi -
Category
Technology
-
view
591 -
download
0
description
Transcript of Ustream vs Legacy, It's never too late to start your fight! #Jsist 2014
![Page 1: Ustream vs Legacy, It's never too late to start your fight! #Jsist 2014](https://reader033.fdocuments.net/reader033/viewer/2022052412/557ca368d8b42a826c8b4774/html5/thumbnails/1.jpg)
Ustream vs Legacy
@matenadasdi
![Page 2: Ustream vs Legacy, It's never too late to start your fight! #Jsist 2014](https://reader033.fdocuments.net/reader033/viewer/2022052412/557ca368d8b42a826c8b4774/html5/thumbnails/2.jpg)
Ustream basics
80.000.000 visitors / month
5.000.000+ viewer hours on tough days
![Page 3: Ustream vs Legacy, It's never too late to start your fight! #Jsist 2014](https://reader033.fdocuments.net/reader033/viewer/2022052412/557ca368d8b42a826c8b4774/html5/thumbnails/3.jpg)
Legacy is not bad code, it’s just old or over-iterated
![Page 4: Ustream vs Legacy, It's never too late to start your fight! #Jsist 2014](https://reader033.fdocuments.net/reader033/viewer/2022052412/557ca368d8b42a826c8b4774/html5/thumbnails/4.jpg)
Everyone starts in the dark…
but there is always light in the end of the tunnel
![Page 5: Ustream vs Legacy, It's never too late to start your fight! #Jsist 2014](https://reader033.fdocuments.net/reader033/viewer/2022052412/557ca368d8b42a826c8b4774/html5/thumbnails/5.jpg)
Our goal was to achieve
more stability and scalability
in our frontend codebase
![Page 6: Ustream vs Legacy, It's never too late to start your fight! #Jsist 2014](https://reader033.fdocuments.net/reader033/viewer/2022052412/557ca368d8b42a826c8b4774/html5/thumbnails/6.jpg)
Our situation was (like every frontend codebase some years ago)
no tests
no modules
all-in-one feature based class system
poor abstraction
JSLint as “code quality tools”
![Page 7: Ustream vs Legacy, It's never too late to start your fight! #Jsist 2014](https://reader033.fdocuments.net/reader033/viewer/2022052412/557ca368d8b42a826c8b4774/html5/thumbnails/7.jpg)
It’s a new ERAit’s a heaven of tools and new solutions
for frontend developers nowadays
![Page 8: Ustream vs Legacy, It's never too late to start your fight! #Jsist 2014](https://reader033.fdocuments.net/reader033/viewer/2022052412/557ca368d8b42a826c8b4774/html5/thumbnails/8.jpg)
we had 5 stages in our long journey
it may help or inspire you too
![Page 9: Ustream vs Legacy, It's never too late to start your fight! #Jsist 2014](https://reader033.fdocuments.net/reader033/viewer/2022052412/557ca368d8b42a826c8b4774/html5/thumbnails/9.jpg)
Structure
![Page 10: Ustream vs Legacy, It's never too late to start your fight! #Jsist 2014](https://reader033.fdocuments.net/reader033/viewer/2022052412/557ca368d8b42a826c8b4774/html5/thumbnails/10.jpg)
separate business logic from its representation
easy isolation
dependency injection
we had to create / use a new structure
There are some must-have things for testing…
![Page 11: Ustream vs Legacy, It's never too late to start your fight! #Jsist 2014](https://reader033.fdocuments.net/reader033/viewer/2022052412/557ca368d8b42a826c8b4774/html5/thumbnails/11.jpg)
not the framework, the way of thinking matters
![Page 12: Ustream vs Legacy, It's never too late to start your fight! #Jsist 2014](https://reader033.fdocuments.net/reader033/viewer/2022052412/557ca368d8b42a826c8b4774/html5/thumbnails/12.jpg)
always think in layers with separated responsibilities
![Page 13: Ustream vs Legacy, It's never too late to start your fight! #Jsist 2014](https://reader033.fdocuments.net/reader033/viewer/2022052412/557ca368d8b42a826c8b4774/html5/thumbnails/13.jpg)
Sync Socket (full-duplex)Async
get data set data
DOM
AJAX WebStorage Cookies Socket Ustream Flash APILongpoll Embeds
Views
manipulates events
Controllers
control notify
Logics Models
get data set data
![Page 14: Ustream vs Legacy, It's never too late to start your fight! #Jsist 2014](https://reader033.fdocuments.net/reader033/viewer/2022052412/557ca368d8b42a826c8b4774/html5/thumbnails/14.jpg)
our new small framework is under 10kb
but we had millions of lines written in an old style
![Page 15: Ustream vs Legacy, It's never too late to start your fight! #Jsist 2014](https://reader033.fdocuments.net/reader033/viewer/2022052412/557ca368d8b42a826c8b4774/html5/thumbnails/15.jpg)
don’t be afraid to start the hardcore continuous integration
![Page 16: Ustream vs Legacy, It's never too late to start your fight! #Jsist 2014](https://reader033.fdocuments.net/reader033/viewer/2022052412/557ca368d8b42a826c8b4774/html5/thumbnails/16.jpg)
Testing
![Page 17: Ustream vs Legacy, It's never too late to start your fight! #Jsist 2014](https://reader033.fdocuments.net/reader033/viewer/2022052412/557ca368d8b42a826c8b4774/html5/thumbnails/17.jpg)
Mocha + Chaiframework:
Node and Browser support
Separated assert libraries
Tons of reporters
mocking:
SinonJS
Spies, Stubs, Mocks
Assertions for invocations
wide framework support
Faking AJAX, server
module dependency mocking:
SquireJS
Dependency injector for
RequireJS
mock / store
Unit testing
![Page 18: Ustream vs Legacy, It's never too late to start your fight! #Jsist 2014](https://reader033.fdocuments.net/reader033/viewer/2022052412/557ca368d8b42a826c8b4774/html5/thumbnails/18.jpg)
Unit testing is a must in every architecture
but it’s not enough for client side code!
![Page 19: Ustream vs Legacy, It's never too late to start your fight! #Jsist 2014](https://reader033.fdocuments.net/reader033/viewer/2022052412/557ca368d8b42a826c8b4774/html5/thumbnails/19.jpg)
Testing real browser functionality with mocking
and simulating the DOM can be a pain in the …
![Page 20: Ustream vs Legacy, It's never too late to start your fight! #Jsist 2014](https://reader033.fdocuments.net/reader033/viewer/2022052412/557ca368d8b42a826c8b4774/html5/thumbnails/20.jpg)
Node.js based navigation scripting
PhantomJS / SlimerJS support
screenshot capture
you can skip or use your own testing framework
Solution: CasperJS
![Page 21: Ustream vs Legacy, It's never too late to start your fight! #Jsist 2014](https://reader033.fdocuments.net/reader033/viewer/2022052412/557ca368d8b42a826c8b4774/html5/thumbnails/21.jpg)
Right now we have:
parallel execution thanks to an own grunt task solution
Tools based on Casper: Screenshot comparison tool, regression testing (PhantomCSS)
own testing wrapper layer with different presets and transparent modules. User.login(), etc.
It’s really flexible and easy to customize!
![Page 22: Ustream vs Legacy, It's never too late to start your fight! #Jsist 2014](https://reader033.fdocuments.net/reader033/viewer/2022052412/557ca368d8b42a826c8b4774/html5/thumbnails/22.jpg)
Automation
![Page 23: Ustream vs Legacy, It's never too late to start your fight! #Jsist 2014](https://reader033.fdocuments.net/reader033/viewer/2022052412/557ca368d8b42a826c8b4774/html5/thumbnails/23.jpg)
Manual processes simply won’t work…
but there is an easy cure!
![Page 24: Ustream vs Legacy, It's never too late to start your fight! #Jsist 2014](https://reader033.fdocuments.net/reader033/viewer/2022052412/557ca368d8b42a826c8b4774/html5/thumbnails/24.jpg)
GRUNT || GULP
we use Grunt!
Why not gulp?
Bad question, both are awesome, move on, and pick one!:)
![Page 25: Ustream vs Legacy, It's never too late to start your fight! #Jsist 2014](https://reader033.fdocuments.net/reader033/viewer/2022052412/557ca368d8b42a826c8b4774/html5/thumbnails/25.jpg)
we could migrate our old PHP / Ruby / etc. based frontend jobs to Node
there is a transparent layer for every frontend related task
thanks to our dynamic GruntFile.js solution, adding new tasks is fast
Thanks to Grunt
![Page 26: Ustream vs Legacy, It's never too late to start your fight! #Jsist 2014](https://reader033.fdocuments.net/reader033/viewer/2022052412/557ca368d8b42a826c8b4774/html5/thumbnails/26.jpg)
CI integration is important!
with an automation layer, it’s easy to do
![Page 27: Ustream vs Legacy, It's never too late to start your fight! #Jsist 2014](https://reader033.fdocuments.net/reader033/viewer/2022052412/557ca368d8b42a826c8b4774/html5/thumbnails/27.jpg)
Rules & standards insurance for the future
![Page 28: Ustream vs Legacy, It's never too late to start your fight! #Jsist 2014](https://reader033.fdocuments.net/reader033/viewer/2022052412/557ca368d8b42a826c8b4774/html5/thumbnails/28.jpg)
Follow your rules, because if you break them,
they are not rules anymore…
![Page 29: Ustream vs Legacy, It's never too late to start your fight! #Jsist 2014](https://reader033.fdocuments.net/reader033/viewer/2022052412/557ca368d8b42a826c8b4774/html5/thumbnails/29.jpg)
Code style!
![Page 30: Ustream vs Legacy, It's never too late to start your fight! #Jsist 2014](https://reader033.fdocuments.net/reader033/viewer/2022052412/557ca368d8b42a826c8b4774/html5/thumbnails/30.jpg)
JSHint !
!pros:
.jshintrc
huge community
wide IDE / Text editor integration
grunt / gulp plugins
!
cons:
still regexp based (JSLint fork)
not pluginable
nearly impossible to write semantic rules
![Page 31: Ustream vs Legacy, It's never too late to start your fight! #Jsist 2014](https://reader033.fdocuments.net/reader033/viewer/2022052412/557ca368d8b42a826c8b4774/html5/thumbnails/31.jpg)
ESLint
!
pros:
pluginable
tons of new rules
rapidly growing community
semantics
ESPRIMA
growing IDE / Text editor integration
!
cons:
you can tell maybe!
![Page 32: Ustream vs Legacy, It's never too late to start your fight! #Jsist 2014](https://reader033.fdocuments.net/reader033/viewer/2022052412/557ca368d8b42a826c8b4774/html5/thumbnails/32.jpg)
We’ve created our own rules
![Page 33: Ustream vs Legacy, It's never too late to start your fight! #Jsist 2014](https://reader033.fdocuments.net/reader033/viewer/2022052412/557ca368d8b42a826c8b4774/html5/thumbnails/33.jpg)
Complexity?
Lines of code (LOC)
Halstead indexes
Maintainability index
Cyclomatic complexitylinearly independent paths in the method
![Page 34: Ustream vs Legacy, It's never too late to start your fight! #Jsist 2014](https://reader033.fdocuments.net/reader033/viewer/2022052412/557ca368d8b42a826c8b4774/html5/thumbnails/34.jpg)
JSComplexity & Plato
We run complexity report in Jenkins nightly build for our whole JS codebase
https://www.npmjs.org/package/complexity-report
Plato is a great tool for manual examinations
https://github.com/es-analysis/plato
![Page 35: Ustream vs Legacy, It's never too late to start your fight! #Jsist 2014](https://reader033.fdocuments.net/reader033/viewer/2022052412/557ca368d8b42a826c8b4774/html5/thumbnails/35.jpg)
Use your CI or Git hooks to force your rules & standards
![Page 36: Ustream vs Legacy, It's never too late to start your fight! #Jsist 2014](https://reader033.fdocuments.net/reader033/viewer/2022052412/557ca368d8b42a826c8b4774/html5/thumbnails/36.jpg)
Modules, modules!
![Page 37: Ustream vs Legacy, It's never too late to start your fight! #Jsist 2014](https://reader033.fdocuments.net/reader033/viewer/2022052412/557ca368d8b42a826c8b4774/html5/thumbnails/37.jpg)
async module loading
dependency injection
project based SOA workflow, we have to avoid code duplication in
several repos/projects
Why we’ve started our modularisation marathon
![Page 38: Ustream vs Legacy, It's never too late to start your fight! #Jsist 2014](https://reader033.fdocuments.net/reader033/viewer/2022052412/557ca368d8b42a826c8b4774/html5/thumbnails/38.jpg)
Do not worry! Code modifications can be automated! http://esprima.org/
{ "type": "Program", "body": [ { "type": "VariableDeclaration", "declarations": [ { "type": "VariableDeclarator", "id": { "type": "Identifier", "name": "city" }, "init": { "type": "Literal", "value": "istanbul", "raw": "'istanbul'" } } ], "kind": "var" }, { "type": "IfStatement", "test": { "type": "BinaryExpression", "operator": "===", "left": { "type": "Identifier", "name": "city" }, "right": { "type": "Literal", "value": "istanbul", "raw": "'istanbul'" } }, "consequent": { "type": "BlockStatement",
var city = ‘istanbul’; !if (city === ‘istanbul’) { conf = 'jsist'; }
![Page 39: Ustream vs Legacy, It's never too late to start your fight! #Jsist 2014](https://reader033.fdocuments.net/reader033/viewer/2022052412/557ca368d8b42a826c8b4774/html5/thumbnails/39.jpg)
NPM modules? Maybe private ones?
more!
![Page 40: Ustream vs Legacy, It's never too late to start your fight! #Jsist 2014](https://reader033.fdocuments.net/reader033/viewer/2022052412/557ca368d8b42a826c8b4774/html5/thumbnails/40.jpg)
private repo server: Sinopia
internal GitLab repos for each package
grunt release task for NPM module release
NPM in private
https://github.com/geddski/grunt-release https://github.com/boennemann/grunt-semantic-release
![Page 41: Ustream vs Legacy, It's never too late to start your fight! #Jsist 2014](https://reader033.fdocuments.net/reader033/viewer/2022052412/557ca368d8b42a826c8b4774/html5/thumbnails/41.jpg)
Why?
we can manage our dependencies in different projects / services
separated tests & documentation for each module
we also use NPM for non-node package management
Yeoman for automated project configuration
![Page 42: Ustream vs Legacy, It's never too late to start your fight! #Jsist 2014](https://reader033.fdocuments.net/reader033/viewer/2022052412/557ca368d8b42a826c8b4774/html5/thumbnails/42.jpg)
That’s not dark anymore!:)
This is where we are right now!
![Page 43: Ustream vs Legacy, It's never too late to start your fight! #Jsist 2014](https://reader033.fdocuments.net/reader033/viewer/2022052412/557ca368d8b42a826c8b4774/html5/thumbnails/43.jpg)
What we’ve achieved so far
600+ modules created
hundreds of unit tests and Casper tests, and growing rapidly
new and important core features are moved to the new structure
we started to create our private NPM modules like hell!
ready for Async module loading
![Page 44: Ustream vs Legacy, It's never too late to start your fight! #Jsist 2014](https://reader033.fdocuments.net/reader033/viewer/2022052412/557ca368d8b42a826c8b4774/html5/thumbnails/44.jpg)
Remember: It’s never too late!
@matenadasdi