Jozef Sakalos at ModUX 2013 http://moduxcon.com

1. Writing
a high quality code

2. Saki
Jozef Sakáloš
•provide project consultancy and supervision
•on-line consultancy, code review, extensions
•deliver Sencha Ext and Touch Courses

3. Contact
•jsakalos@extjs.eu, jsakalos@gmail.com
•Facebook: jsakalos
•Skype: jsakalos
•Sencha Forums: jsakalos

4. Code Quality

5. Code must work, but
•fixing a bug introduces (many) new bugs
•a new developer cannot (easily) comprehend the code
•implementing changes/features is (extremely) difficult
•no, or not up-to-date documentation
•cross browser problems

6. if(anyOfAbove === “yes”) {
codeQuality !== “high enough”;
}

7. Quality
1. is degree of perfection of a product
2. is the standard of something as
measured against other things of a
similar kind

8. High quality code is
1. pleasant to read and easy to grasp
2. abide by standards
3. modular
4. bug-free

9. High quality code is
5. finished
6. clean
7. documented
8. working

10. The code must be
pleasant to read and
easy to grasp

11. Write the code for
another person

12. Ugly code

13. Ugliest code

14. Beautiful code

15. The code must abide
by standards

16. Two kind of standards
•JavaScript standards
•your coding conventions

17. http://jslint.com

18. Do you have a written
Code Style Guide?

19. Style Guide
•naming conventions
•spaces, indenting, commas
•how to write docs
•how to write file header footer
•... and others

20. Sencha recommends
naming conventions
in The Class System
guide

22. Code must be
modular

23. Example

24. Task #1:
Split the app into
small modules.

25. Rule #1: Define and
then abide by API of
modules

26. Corollaries
•controller must not know view internals
•view must fire custom events
•dynamic view must expose an API
•view must not access another view

27. Don’t do it like this
Controller
View
Button
ListenHide/Show
View
Store
Record/Field

28. ...but like this
Controller
View
Button
View
Store
setVisible
handler
custom event
updateRecord

29. No more spaghetti code

30. The code must be
bug-free

31. The code must be finished
Finished === there is nothing more to
be done on it
if(code.indexOf(“@todo”) !== -1) {
code !== “finished”;
}

32. The code must be
documented
see http://github.com/senchalabs/jsduck

33. And, of course, the
code must WORK!

34. Questions?

35. Happy quality
coding!