• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
WebConf_Riga_Confessions of-a-traitor_Krzsysztof Szafranek
 

WebConf_Riga_Confessions of-a-traitor_Krzsysztof Szafranek

on

  • 2,925 views

 

Statistics

Views

Total Views
2,925
Views on SlideShare
1,951
Embed Views
974

Actions

Likes
3
Downloads
6
Comments
0

4 Embeds 974

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

Accessibility

Categories

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.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
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