Dart Power Tools

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); } ...

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(); }

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); });

25. HTML unit test

27. content_shell $ content_shell --dump-render-tree web/test_index.html Content-Type: text/plain PASS All 2 tests passed Collapse All

28. Server

29. Web framework server.dart import 'package:start/start.dart'; start(public: 'web', port: port).then((Server app) { app.post('/’).listen((request) { ... }); });

30. Web framework server.dart import 'package:start/start.dart'; start(public: 'web', port: port).then((Server app) { app.post('/’).listen((request) { ... }); });

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);); }); ...

34. 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)); }); ...

35. server.dart void main() { ... app.get('/:hash').listen((request) { String hash = request.param('hash'); client.get(hash).then((val) => request.response.redirect(val)); }); ...

38. Server tests

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'); ...

42. Run the test $ dart server_tests.dart PASS: HashURL

43. Deployment

44. Deployment $ heroku create $ heroku config:add BUILDPACK_URL=... $ heroku addons:add redistogo $ git push heroku

45. How many OS/browser combos? 200+

46. Cross-browser testing

47. Dart + Selenium browser_tests.dart void main() { ... driver = WebDriver.createDriver( url: “http://localhost:4444/wd/hub”, desiredCapabilities: Capabilities.android); ...

48. 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/")) ...

49. Sauce Labs saucelabs.com/tests

50. Continuous Integration

51. drone.io https://drone.io

52. Build Configuration image: dart script: - pub get - pub build - dart bin/server_test.dart deploy: heroku: app: dart-demo

55. drone.io https://drone.io

56. What have we learned? ✓ ✓ ✓ ✓ ✓ Built Dart app Client & server Database persistence Tested Deployed ✓ Language features ✓ Tools ✓ Continuous Integration

57. What should you do? Try Dart Test things Use tools Deploy!

58. Thank you! Questions?

Dart Power Tools

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Similar to Dart Power Tools

Similar to Dart Power Tools (20)

Recently uploaded

Recently uploaded (20)

Dart Power Tools