Dart Power Tools

  • 752 views
Uploaded on

Increase the speed of Dart software delivery with unit testing, code analysis, headless browser testing, cross-browser and mobile testing, continuous integration, and automated deployments.

Increase the speed of Dart software delivery with unit testing, code analysis, headless browser testing, cross-browser and mobile testing, continuous integration, and automated deployments.

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to like this
No Downloads

Views

Total Views
752
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
1
Comments
1
Likes
0

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. Dart Power Tools Brad Rydzewski & Matt Norris @bradrydzewski @mattnorrisme
  • 2. Dart 1.0!
  • 3. Demo github.com/bradrydzewski/dart-url-shortener
  • 4. What will we learn? Build Dart app Database persistence Test Deploy Language features Tools Continuous Integration
  • 5. Client
  • 6. Including Dart index.html <html> ... <script type="application/dart” src="index.dart"></script> <script src="packages/browser/dart.js"></script> ... </html>
  • 7. Including Dart index.html <html> ... <script type="application/dart” src="index.dart"></script> <script src="packages/browser/dart.js"></script> ... </html>
  • 8. Form index.html index.dart ... void main() { <input type="text" id="long_url" /> querySelector("#btn") <button id="btn">Shorten</button> <a id="short_url” class="hidden"></a> ... .onClick.listen(onClick); } ...
  • 9. Form index.html index.dart ... void main() { <input type="text" id="long_url" /> querySelector("#btn") <button id="btn">Shorten</button> <a id="short_url” class="hidden"></a> ... .onClick.listen(onClick); } ...
  • 10. Form index.html index.dart ... void main() { <input type="text" id="long_url" /> querySelector("#btn") <button id="btn">Shorten</button> <a id="short_url” class="hidden"></a> ... .onClick.listen(onClick); } ...
  • 11. Dart main index.html index.dart ... void main() { <input type="text" id="long_url" /> querySelector("#btn") <button id="btn">Shorten</button> <a id="short_url” class="hidden"></a> ... .onClick.listen(onClick); } ...
  • 12. Attach listener to button index.html index.dart ... void main() { <input type="text" id="long_url" /> querySelector("#btn") <button id="btn">Shorten</button> <a id="short_url” class="hidden"></a> ... .onClick.listen(onClick); } ...
  • 13. index.dart void onClick(MouseEvent event) { HttpRequest request = new HttpRequest(); request.onReadyStateChange.listen((_) { showText(request.responseText); }); ... ... request.send(); }
  • 14. index.dart void onClick(MouseEvent event) { HttpRequest request = new HttpRequest(); request.onReadyStateChange.listen((_) { showText(request.responseText); }); ... ... request.send(); }
  • 15. index.dart void onClick(MouseEvent event) { HttpRequest request = new HttpRequest(); request.onReadyStateChange.listen((_) { showText(request.responseText); }); ... ... request.send(); }
  • 16. index.dart void onClick(MouseEvent event) { HttpRequest request = new HttpRequest(); request.onReadyStateChange.listen((_) { showText(request.responseText); }); ... ... request.send(); }
  • 17. Some sugar void showText(String hash) { var loc = window.location var url = "${loc.protocol}//${loc.host}/${hash}"; var urlShort = querySelector("#url_short") ..attributes["href"] = url ..text = url ..classes.remove("hidden"); }
  • 18. More sugar, please! void showText(String hash) { var loc = window.location var url = "${loc.protocol}//${loc.host}/${hash}"; var urlShort = querySelector("#url_short") ..attributes["href"] = url ..text = url ..classes.remove("hidden"); }
  • 19. Demo github.com/bradrydzewski/dart-url-shortener
  • 20. I must have put a decimal point in the wrong place. I always mess up some mundane detail!
  • 21. Client tests
  • 22. HTML unit test test_index.dart import 'package:unittest/unittest.dart'; import 'package:unittest/html_enhanced_config.dart'; ... main() { useHtmlEnhancedConfiguration(); test("url includes scheme", () { expect(isValidUrl(“www.yahoo.com”), false); expect(isValidUrl(“http://www.yahoo.com”), true); });
  • 23. HTML unit test test_index.dart import 'package:unittest/unittest.dart'; import 'package:unittest/html_enhanced_config.dart'; ... main() { useHtmlEnhancedConfiguration(); test("url includes scheme", () { expect(isValidUrl(“www.yahoo.com”), false); expect(isValidUrl(“http://www.yahoo.com”), true); });
  • 24. HTML unit test test_index.dart import 'package:unittest/unittest.dart'; import 'package:unittest/html_enhanced_config.dart'; ... main() { useHtmlEnhancedConfiguration(); test("url includes scheme", () { expect(isValidUrl(“www.yahoo.com”), false); expect(isValidUrl(“http://www.yahoo.com”), true); });
  • 25. HTML unit test
  • 26. content_shell $ content_shell --dump-render-tree web/test_index.html Content-Type: text/plain PASS All 2 tests passed Collapse All
  • 27. Server
  • 28. Web framework server.dart import 'package:start/start.dart'; start(public: 'web', port: port).then((Server app) { app.post('/’).listen((request) { ... }); });
  • 29. Web framework server.dart import 'package:start/start.dart'; start(public: 'web', port: port).then((Server app) { app.post('/’).listen((request) { ... }); });
  • 30. server.dart void main() { ... app.post("/").listen((request) { String url = request.param('url'); String hash = toHash(url); client.set(hash, url).then((_)=>request.response.json(hash);); }); ...
  • 31. server.dart void main() { ... app.post("/").listen((request) { String url = request.param('url'); String hash = toHash(url); client.set(hash, url).then((_)=>request.response.json(hash);); }); ...
  • 32. server.dart void main() { ... app.post("/").listen((request) { String url = request.param('url'); String hash = toHash(url); client.set(hash, url).then((_)=>request.response.json(hash);); }); ...
  • 33. server.dart void main() { ... app.post("/").listen((request) { String url = request.param('url'); String hash = toHash(url); client.set(hash, url).then((_)=>request.response.json(hash)); }); ...
  • 34. server.dart void main() { ... app.get('/:hash').listen((request) { String hash = request.param('hash'); client.get(hash).then((val) => request.response.redirect(val)); }); ...
  • 35. server.dart void main() { ... app.get('/:hash').listen((request) { String hash = request.param('hash'); client.get(hash).then((val) => request.response.redirect(val)); }); ...
  • 36. server.dart void main() { ... app.get('/:hash').listen((request) { String hash = request.param('hash'); client.get(hash).then((val) => request.response.redirect(val)); }); ...
  • 37. Server tests
  • 38. server_tests.dart import 'package:unittest/unittest.dart'; import 'package:unittest/vm_config.dart'; import 'server.dart' as server; void main() { useVMConfiguration(); String URL = 'http://www.meetup.com/gdg-silicon-valley’; test('HashURL', () { expect(server.toHash(URL), isNotNull); expect(server.toHash(URL), '287b6d95'); ...
  • 39. server_tests.dart import 'package:unittest/unittest.dart'; import 'package:unittest/vm_config.dart'; import 'server.dart' as server; void main() { useVMConfiguration(); String URL = 'http://www.meetup.com/gdg-silicon-valley’; test('HashURL', () { expect(server.toHash(URL), isNotNull); expect(server.toHash(URL), '287b6d95'); ...
  • 40. server_tests.dart import 'package:unittest/unittest.dart'; import 'package:unittest/vm_config.dart'; import 'server.dart' as server; void main() { useVMConfiguration(); String URL = 'http://www.meetup.com/gdg-silicon-valley’; test('HashURL', () { expect(server.toHash(URL), isNotNull); expect(server.toHash(URL), '287b6d95'); ...
  • 41. Run the test $ dart server_tests.dart PASS: HashURL
  • 42. Deployment
  • 43. Deployment $ heroku create $ heroku config:add BUILDPACK_URL=... $ heroku addons:add redistogo $ git push heroku
  • 44. How many OS/browser combos? 200+
  • 45. Cross-browser testing
  • 46. Dart + Selenium browser_tests.dart void main() { ... driver = WebDriver.createDriver( url: “http://localhost:4444/wd/hub”, desiredCapabilities: Capabilities.android); ...
  • 47. Dart + Selenium browser_tests.dart void main() { ... test('integration test', (){ return driver.findElement(new By.id('url_long')) .then((elem)=>elem.sendKeys("https://www.dartlang.org/")) ... .then((attr)=>expect(attr, "https://www.dartlang.org/")) ...
  • 48. Sauce Labs saucelabs.com/tests
  • 49. Continuous Integration
  • 50. drone.io https://drone.io
  • 51. Build Configuration image: dart script: - pub get - pub build - dart bin/server_test.dart deploy: heroku: app: dart-demo
  • 52. Build Configuration image: dart script: - pub get - pub build - dart bin/server_test.dart deploy: heroku: app: dart-demo
  • 53. Build Configuration image: dart script: - pub get - pub build - dart bin/server_test.dart deploy: heroku: app: dart-demo
  • 54. drone.io https://drone.io
  • 55. What have we learned? ✓ ✓ ✓ ✓ ✓ Built Dart app Client & server Database persistence Tested Deployed ✓ Language features ✓ Tools ✓ Continuous Integration
  • 56. What should you do? Try Dart Test things Use tools Deploy!
  • 57. Thank you! Questions?