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 effectiv...
JavaScript AD 2004
----------------------------------------------------------------- Language       files          blank        comment      ...
-----------------------------------------------------------------Language       files          blank        comment       ...
JavaScript AD 2004
JavaScript AD 2012
Building
• minification    • linting    • unit testing    • deployment    • template processing    • much moreCurrently Grunt offer...
Automate* Let machines do what theyre best at:    * catching silly mistakes    * optimization    * boring but necessary ta...
Unit tests
Everybody has heard about unit tests, but have you actually seen or wrote them?
Cr Buste                                                                                                                  ...
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 cl...
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 te...
3) Automate with test      runnerIf you haven’t already picked a framework with integrated runner, like buster.js or js-te...
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 ...
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 testa...
Staticanalysis
Early warning system in an editor.
jslint         jshint
Your sadly      pathetic      bleatings are      harshing my      mellow.Douglas Crockford commenting on complaints about ...
1) Make your intentobvious
Anything that isn’t                                          crystal clear to a                                        sta...
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 ...
Make your intentclear obvious
[taskShortcut         performSelector:selector         withObject:param      ];Named parameters in Objective C encourage e...
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 =...
Design patternsDesign patterns make the intent of the design easy to see.If you are using a pattern, make sure it’s commun...
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 les...
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         ...
Thank you!Image credits:eclectic echoes    Philippe SemeriaThe Facey Family   Nick Trebychrisnb20          QuakeConEsther ...
Confessions of the Traitor: How Objective C Made Me a Better JavaScript Programmer
Confessions of the Traitor: How Objective C Made Me a Better JavaScript Programmer
Confessions of the Traitor: How Objective C Made Me a Better JavaScript Programmer
Confessions of the Traitor: How Objective C Made Me a Better JavaScript Programmer
Upcoming SlideShare
Loading in …5
×

Confessions of the Traitor: How Objective C Made Me a Better JavaScript Programmer

2,890 views
2,723 views

Published on

Lessons learned from my venture into Objective C, after years of working as a front-end developer. Slides from my talk at WebConf Riga 2012.

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,890
On SlideShare
0
From Embeds
0
Number of Embeds
58
Actions
Shares
0
Downloads
8
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Confessions of the Traitor: How Objective C Made Me a Better JavaScript Programmer

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

×