Talking about diving to JS at September 2014 at Kharkiv, Ukraine

1. FLEX JAVASCRIPT
by Daniil Moskovtsov

2. WE ARE STARTING
NEW PROJECT

3. !
- tdd friendly
- maintainable
- good libraries to work with charts
- cool
- rest api friendly
- non-tricky support of major browsers
- De facto standard for web applications
today
- Large (and probably still growing)
developer community
- Many interesting frameworks and
packages available (eg. for charting),
including many with permissive licenses
(apache, MIT, etc.).
- Native support by all major browsers, no
need for flash (or other) plugin.
- Potential to reuse codebase for mobile
apps
My criteria: Business criteria:
WHICHTECH?

4. LIST OF STUFF

5. YEOMAN
• yo webapp - generate web application

6. SETTING UP PROJECT
• grunt - builds project (Gruntfile.js)
• karma - test runner (karma.conf)
• jasmine - unit-testing framework
• bower - dependency management (package.json)
• jshint - code quality analyser (.jshintrc)
• codebase (app.js and index.html)

7. ANT GRUNT
• grunt serve - builds deploy and watch application
• grunt test - runs tests only(watch mode possible)
• grunt build - builds application

8. KARMA
• Runs tests

9. JASMINE
!
describe('xyChart: Redrawing chart', function () {
!
beforeEach(function () {
});
!
afterEach(function () {
});
it('removes a selected annotation locally', function () {
});
});

10. !
it('removes the selected annotation', function () {
scope.removeSelectedAnnotation();
expect(scope.selectedAnnotation).toBeNull();
});
JASMINE

11. JASMINE MATCHERS
• expect(x).toEqual(y);
• expect(x).toBe(y);
• expect(x).toMatch(pattern);
• expect(x).toBeDefined();
• expect(x).toBeUndefined();
• expect(x).toBeNull();

12. JASMINE MATCHERS
• expect(x).toBeTruthy();
• expect(x).toBeFalsy();
• expect(x).toContain(y);
• expect(x).toBeLessThan(y);
• expect(x).toBeGreaterThan(y);
• expect(function(){fn();}).toThrow(e);

13. it('broadcasts event after annotation is removed', function () {
spyOn(rootScope, '$broadcast');
annotationService.removeSelectedAnnotation();
expect(rootScope.$broadcast).
toHaveBeenCalledWith('ANNOTATION_REMOVED',
annotationService.annotations);
});
JASMINE

14. BOWER
bower update - updates installed packages
bower install - installs the project dependencies
!
package.json
!
{ "dependencies": {},
"devDependencies": {
"bower": "~1.3.9",
"grunt": "~0.4.4",
…
}

15. JSHINT
Tool that helps to detect errors and potential problems in your
JavaScript code

16. CODEBASE
scripts
main.js
views
view1.html
styles
main.css
index.html

17. FRAMEWORKS
• AngularJS
• d3.js
• ui.bootstrap

18. ANGULAR
• dependency injection
• template system
• events
• databinding

19. D3
D3.js is a JavaScript library
for manipulating documents based on data

20. LODASH
A utility library delivering consistency,
customization, performance and extras.

21. UI BOOTSTRAP
Bootstrap components written in pure AngularJS
by the AngularUITeam

22. WHAT WE’VE LEARNED

23. LINEMAN
Lineman takes everything you love about building server-side
applications so that you can find joy in your client-side applications

24. PROTRACTOR
E2E test framework for Angular apps

25. NVD3
This project is an attempt to build re-usable charts and chart
components for d3.js

26. COOLEST STUFF

27. WEBSTORM
The most intelligent JavaScript IDE:
-debugging, live-reloading
-angular (+/-), jshint, bower, grunt support

28. SPY-JS
Makes it simple to trace, profile and debug javascript code

29. I WANT
TO HAVE A CONTROL

30. How to debug code?
QUICKTIPS

31. How to debug tests?
QUICKTIPS

32. How to write maintainable js code?
QUICKTIPS

33. How to connect d3 with angular?
QUICKTIPS

34. How to test d3.js?
QUICKTIPS

35. Shared scope or event-driven model?
QUICKTIPS

36. Events or watches in angular?
QUICKTIPS

37. SO
FREEDOM means RESPONSIBILITY