Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Bye flex. Hey js.

4,694 views

Published on

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

Published in: Software
  • Be the first to comment

  • Be the first to like this

Bye flex. Hey js.

  1. 1. FLEX JAVASCRIPT by Daniil Moskovtsov
  2. 2. WE ARE STARTING NEW PROJECT
  3. 3. WHICH TECH? My criteria: Business criteria: ! - 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
  4. 4. LIST OF STUFF
  5. 5. YEOMAN • yo webapp - generate web application
  6. 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. 7. ANT GRUNT • grunt serve - builds deploy and watch application • grunt test - runs tests only(watch mode possible) • grunt build - builds application
  8. 8. KARMA • Runs tests
  9. 9. JASMINE ! describe('xyChart: Redrawing chart', function () { ! beforeEach(function () { }); ! afterEach(function () { }); it('removes a selected annotation locally', function () { }); });
  10. 10. JASMINE ! it('removes the selected annotation', function () { scope.removeSelectedAnnotation(); expect(scope.selectedAnnotation).toBeNull(); });
  11. 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. 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. 13. JASMINE it('broadcasts event after annotation is removed', function () { spyOn(rootScope, '$broadcast'); annotationService.removeSelectedAnnotation(); expect(rootScope.$broadcast). toHaveBeenCalledWith('ANNOTATION_REMOVED', annotationService.annotations); });
  14. 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. 15. JSHINT Tool that helps to detect errors and potential problems in your JavaScript code
  16. 16. CODEBASE scripts main.js views view1.html styles main.css index.html
  17. 17. FRAMEWORKS • AngularJS • d3.js • ui.bootstrap
  18. 18. ANGULAR • dependency injection • template system • events • databinding
  19. 19. D3 D3.js is a JavaScript library for manipulating documents based on data
  20. 20. LODASH A utility library delivering consistency, customization, performance and extras.
  21. 21. UI BOOTSTRAP Bootstrap components written in pure AngularJS by the AngularUI Team
  22. 22. WHAT WE’VE LEARNED
  23. 23. LINEMAN Lineman takes everything you love about building server-side applications so that you can find joy in your client-side applications
  24. 24. PROTRACTOR E2E test framework for Angular apps
  25. 25. NVD3 This project is an attempt to build re-usable charts and chart components for d3.js
  26. 26. COOLEST STUFF
  27. 27. WEBSTORM The most intelligent JavaScript IDE: -debugging, live-reloading -angular (+/-), jshint, bower, grunt support
  28. 28. SPY-JS Makes it simple to trace, profile and debug javascript code
  29. 29. I WANT TO HAVE A CONTROL
  30. 30. QUICK TIPS How to debug code?
  31. 31. QUICK TIPS How to debug tests?
  32. 32. QUICK TIPS How to write maintainable js code?
  33. 33. QUICK TIPS How to connect d3 with angular?
  34. 34. QUICK TIPS How to test d3.js?
  35. 35. QUICK TIPS Shared scope or event-driven model?
  36. 36. QUICK TIPS Events or watches in angular?
  37. 37. SO FREEDOM means RESPONSIBILITY

×