• Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,696
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
8
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Confessionsof a TraitorHow Objective C Made Me a BetterJavaScript Programmer@szafranek
  • 2. Game developerat WoogaFront-end architectat NokiaFront-end developer,manager at Roche
  • 3. github.com/wooga/Pocket-IslandThe last HTML5 project I was a part of is now available as open source.
  • 4. In May 2012, after 7 years of professional front-end development, I started to work on nativeiOS game.
  • 5. [self learn:@"Objective C"];
  • 6. We make our tools,our tools make us
  • 7. • C with class-based OOP• [syntax awkward:YES];• Compiled• No garbage collection!
  • 8. [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.
  • 9. JavaScript AD 2004
  • 10. ----------------------------------------------------------------- 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.
  • 11. -----------------------------------------------------------------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.
  • 12. JavaScript AD 2004
  • 13. JavaScript AD 2012
  • 14. Building
  • 15. • minification • linting • unit testing • deployment • template processing • much moreCurrently Grunt offers over 200 plugins.
  • 16. Automate* Let machines do what theyre best at: * catching silly mistakes * optimization * boring but necessary tasks
  • 17. Unit tests
  • 18. Everybody has heard about unit tests, but have you actually seen or wrote them?
  • 19. 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
  • 20. In Objective C world unit testing is supported out of the box.
  • 21. “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.
  • 22. Getting started
  • 23. 1) Pick any frameworkbuster.js, js-test-driver, QUnit, Jasmine are all good places to start.
  • 24. 2) Start writing tests
  • 25. Unit test is a function that tests another function
  • 26. implementationfunction factorial(n) { if (n == 1) { return 1; } return n * factorial(n-1);}testfunction testFactorial() { assert.equals(120, factorial(5));}
  • 27. 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.
  • 28. Test runner vs.Unit testingframework
  • 29. Modern test runners can execute your tests in a variety of JS environments.
  • 30. buster.js Framework and runner ... that doesn’t run on Windows. Yet.Authors are working on it. Version 1.0 will run on Windows.
  • 31. testemCross-platform test runnerNeeds test framework
  • 32. QUnitTest framowork used by jQuery
  • 33. http://szafranek.net/works/articles/javascript-unit-testing/
  • 34. http://bit.ly/writing-testable-javascriptPresentation contains practical example of making typical jQuery-based code testable.
  • 35. Staticanalysis
  • 36. Early warning system in an editor.
  • 37. jslint jshint
  • 38. 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.
  • 39. 1) Make your intentobvious
  • 40. 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/
  • 41. 2) Catch mistakes early
  • 42. Integrate jslint or jshint with your editor.
  • 43. AutomateUse continuous integration to run static analysis checks on your code.
  • 44. Refactoring
  • 45. Improvingthe design of codewithout changingits external behavior
  • 46. Improvingthe design of codewithout changingits external behavior
  • 47. GoalsBefore starting refactoring, think for a moment what you want to achieve.
  • 48. Remove duplicationExtract method, extract variable
  • 49. 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();}
  • 50. Make your intentclear obvious
  • 51. [taskShortcut performSelector:selector withObject:param ];Named parameters in Objective C encourage explicit naming.
  • 52. data, t, managerare not good namesformData, timeLeft,urlRouter are better
  • 53. Explanatory variables
  • 54. 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.
  • 55. 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.
  • 56. Clean code first,optimization second
  • 57. Prematureoptimizationis the root ofall evil.
  • 58. Improvingthe design of codewithout changingits external behavior
  • 59. Tests!How do you verify that behavior didn’t change?
  • 60. Tests?Refactoring without tests (aka “happy development”) is all too common.It’s not a very responsible thing to do.
  • 61. 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.
  • 62. My reaction to the word “IDE”...
  • 63. ... was deeply rooted.
  • 64. WebStorm IDE has good support for essential refactorings.
  • 65. •Web Storm •... •... •... •Cloud9 •...?We need better and more tools for refactoring JavaScript!
  • 66. AutomateRefactoring has to be performed by a human, but good tool (like WebStorm) can make itmuch safer and easier.
  • 67. autoUnit testing mate autoStatic analysis mate autoRefactoringmat e @szafranek
  • 68. Thank you!Image credits:eclectic echoes Philippe SemeriaThe Facey Family Nick Trebychrisnb20 QuakeConEsther Gibbons