WebConf_Riga_Confessions of-a-traitor_Krzsysztof Szafranek
Upcoming SlideShare
Loading in...5

WebConf_Riga_Confessions of-a-traitor_Krzsysztof Szafranek






Total Views
Views on SlideShare
Embed Views



4 Embeds 979

http://www.wooga.com 969
https://twitter.com 6
http://feeds.feedburner.com 3
http://twitter.com 1



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

WebConf_Riga_Confessions of-a-traitor_Krzsysztof Szafranek WebConf_Riga_Confessions of-a-traitor_Krzsysztof Szafranek Presentation Transcript

  • Confessionsof a TraitorHow Objective C Made Me a BetterJavaScript Programmer@szafranek
  • Game developerat WoogaFront-end architectat NokiaFront-end developer,manager at Roche
  • github.com/wooga/Pocket-IslandThe last HTML5 project I was a part of is now available as open source.
  • In May 2012, after 7 years of professional front-end development, I started to work on nativeiOS game.
  • [self learn:@"Objective C"];
  • We make our tools,our tools make us
  • • C with class-based OOP• [syntax awkward:YES];• Compiled• No garbage collection!
  • [Disclaimer]I will not try to convince you that JavaScript should be more like other languages.Yet we can be more effective JS developers by learning something from others.
  • JavaScript AD 2004
  • ----------------------------------------------------------------- Language files blank comment code ----------------------------------------------------------------- Javascript 100 3764 1858 22258 HTML 9 73 23 690 Ruby 4 90 15 237 Bourne Shell 2 13 0 27 ----------------------------------------------------------------- SUM: 115 3940 1896 23212 -----------------------------------------------------------------Codebase size of Pocket Island. The project didn’t use external libraries.
  • -----------------------------------------------------------------Language files blank comment code-----------------------------------------------------------------Javascript 717 79132 184499 425289HTML 452 84159 4819 198471XML 133 2155 1391 122219Java 527 10215 6633 42287CSS 94 3067 2101 23727Ruby 33 599 146 1794XSLT 1 57 29 1453Bourne Shell 47 285 293 865Python 5 244 256 828XSD 2 0 2 244JSP 4 7 0 92DTD 1 37 32 92Perl 2 26 0 55DOS Batch 4 4 1 18-----------------------------------------------------------------SUM: 2022 179987 200202 817434-----------------------------------------------------------------Codebase size of my previous JavaScript project. That one included several external libraries.
  • JavaScript AD 2004
  • JavaScript AD 2012
  • Building
  • • minification • linting • unit testing • deployment • template processing • much moreCurrently Grunt offers over 200 plugins.
  • Automate* Let machines do what theyre best at: * catching silly mistakes * optimization * boring but necessary tasks
  • Unit tests
  • Everybody has heard about unit tests, but have you actually seen or wrote them?
  • Cr Buste oss r.J c S En DOH heck h Fir ance J3U eUnit JS JSN nit JSS Uniwriting tests? JST pec t JST e est st JSU .NE JSp nit T Jas ec U Js- Jasm nit Js- test ine tes -dr Mo t-run iver No ch ne de a r QU u n i Rh nit t Rh Un ino it S OA Uni Sin tes t Su on.js t Te ite Te st.M st st.S or Te im e stC pl Te ase e Un T stI yrt t itT le est Vo in YU ws g jsU I T nit est jsU Te scr ni st ew tyIs the number of JS unit testing frameworks higher than the number of JavaScript developers wr -u n i u t
  • In Objective C world unit testing is supported out of the box.
  • “No one pays you for testing”The above quote comes from a PHP talk I listened to recently.* Don’t ask your boss or client if you can write tests – tests are part of the code, notsomething extra* The point of writing tests is to make you faster at delivering quality product, not slower.* Tests enforce better coding style.
  • Getting started
  • 1) Pick any frameworkbuster.js, js-test-driver, QUnit, Jasmine are all good places to start.
  • 2) Start writing tests
  • Unit test is a function that tests another function
  • implementationfunction factorial(n) { if (n == 1) { return 1; } return n * factorial(n-1);}testfunction testFactorial() { assert.equals(120, factorial(5));}
  • 3) Automate with test runnerIf you haven’t already picked a framework with integrated runner, like buster.js or js-test-driver, use testem to run your tests.You will NOT keep writing tests if you don’t automate running them with ContinousIntegration tool like Jenkins.
  • Test runner vs.Unit testingframework
  • Modern test runners can execute your tests in a variety of JS environments.
  • buster.js Framework and runner ... that doesn’t run on Windows. Yet.Authors are working on it. Version 1.0 will run on Windows.
  • testemCross-platform test runnerNeeds test framework
  • QUnitTest framowork used by jQuery
  • http://szafranek.net/works/articles/javascript-unit-testing/
  • http://bit.ly/writing-testable-javascriptPresentation contains practical example of making typical jQuery-based code testable.
  • Staticanalysis
  • Early warning system in an editor.
  • jslint jshint
  • Your sadly pathetic bleatings are harshing my mellow.Douglas Crockford commenting on complaints about jslint being too restrictive.This quote was one of the reasons to create jshint.
  • 1) Make your intentobvious
  • Anything that isn’t crystal clear to a static analysis tool probably isn’t clear to your fellow programmers, either.Highly recommended article on the value of static analysis, by John Carmack:http://www.altdevblogaday.com/2011/12/24/static-code-analysis/
  • 2) Catch mistakes early
  • Integrate jslint or jshint with your editor.
  • AutomateUse continuous integration to run static analysis checks on your code.
  • Refactoring
  • Improvingthe design of codewithout changingits external behavior
  • Improvingthe design of codewithout changingits external behavior
  • GoalsBefore starting refactoring, think for a moment what you want to achieve.
  • Remove duplicationExtract method, extract variable
  • if (player.coins < budget.getMin()) { offerCredit();}if (friend.coins < budget.getMin()) { offerFriendCredit();}var min = budget.getMin();if (player.coins < min) { offerCredit();}if (friend.coins < min) { offerFriendCredit();}
  • Make your intentclear obvious
  • [taskShortcut performSelector:selector withObject:param ];Named parameters in Objective C encourage explicit naming.
  • data, t, managerare not good namesformData, timeLeft,urlRouter are better
  • Explanatory variables
  • button.setPosition(0, parseInt(parentDiv.height, 10) / 2 - parseInt(border.size, 10) / 2 ); var verticalCenter = parseInt(parentDiv.height, 10) / 2 - parseInt(border.size, 10) / 2; button.setPosition(0, verticalCenter);It’s worth to introduce a variable to communicate intention clearly, even if it doesn’t reduceduplication.
  • Design patternsDesign patterns make the intent of the design easy to see.If you are using a pattern, make sure it’s communicated through naming.
  • Clean code first,optimization second
  • Prematureoptimizationis the root ofall evil.
  • Improvingthe design of codewithout changingits external behavior
  • Tests!How do you verify that behavior didn’t change?
  • Tests?Refactoring without tests (aka “happy development”) is all too common.It’s not a very responsible thing to do.
  • IDEThe problem with refactoring JavaScript:poor tool support -> makes refactoring require courage -> makes refactoring less likely tohappen.Search and replace doesn’t constitute “tool support” for refactoring – it’s only text-based anddoesn’t guarantee that the semantics of your program will be preserved.
  • My reaction to the word “IDE”...
  • ... was deeply rooted.
  • WebStorm IDE has good support for essential refactorings.
  • •Web Storm •... •... •... •Cloud9 •...?We need better and more tools for refactoring JavaScript!
  • AutomateRefactoring has to be performed by a human, but good tool (like WebStorm) can make itmuch safer and easier.
  • autoUnit testing mate autoStatic analysis mate autoRefactoringmat e @szafranek
  • Thank you!Image credits:eclectic echoes Philippe SemeriaThe Facey Family Nick Trebychrisnb20 QuakeConEsther Gibbons