Dart Power Tools
Brad Rydzewski & Matt Norris
@bradrydzewski

@mattnorrisme
Dart 1.0!
Demo
github.com/bradrydzewski/dart-url-shortener
What will we learn?
Build Dart app
Database persistence
Test
Deploy

Language features
Tools
Continuous Integration
Client
Including Dart
index.html
<html>
...
<script type="application/dart” src="index.dart"></script>
<script src="packages/brow...
Including Dart
index.html
<html>
...
<script type="application/dart” src="index.dart"></script>
<script src="packages/brow...
Form
index.html

index.dart

...

void main() {

<input type="text" id="long_url" />

querySelector("#btn")

<button id="b...
Form
index.html

index.dart

...

void main() {

<input type="text" id="long_url" />

querySelector("#btn")

<button id="b...
Form
index.html

index.dart

...

void main() {

<input type="text" id="long_url" />

querySelector("#btn")

<button id="b...
Dart main
index.html

index.dart

...

void main() {

<input type="text" id="long_url" />

querySelector("#btn")

<button ...
Attach listener to button
index.html

index.dart

...

void main() {

<input type="text" id="long_url" />

querySelector("...
index.dart
void onClick(MouseEvent event) {
HttpRequest request = new HttpRequest();
request.onReadyStateChange.listen((_)...
index.dart
void onClick(MouseEvent event) {
HttpRequest request = new HttpRequest();
request.onReadyStateChange.listen((_)...
index.dart
void onClick(MouseEvent event) {
HttpRequest request = new HttpRequest();
request.onReadyStateChange.listen((_)...
index.dart
void onClick(MouseEvent event) {
HttpRequest request = new HttpRequest();
request.onReadyStateChange.listen((_)...
Some sugar
void showText(String hash) {
var loc = window.location
var url = "${loc.protocol}//${loc.host}/${hash}";
var ur...
More sugar, please!
void showText(String hash) {
var loc = window.location
var url = "${loc.protocol}//${loc.host}/${hash}...
Demo
github.com/bradrydzewski/dart-url-shortener
I must have put a decimal point in the wrong place.
I always mess up some mundane detail!
Client tests
HTML unit test
test_index.dart
import 'package:unittest/unittest.dart';
import 'package:unittest/html_enhanced_config.dart...
HTML unit test
test_index.dart
import 'package:unittest/unittest.dart';
import 'package:unittest/html_enhanced_config.dart...
HTML unit test
test_index.dart
import 'package:unittest/unittest.dart';
import 'package:unittest/html_enhanced_config.dart...
HTML unit test
content_shell
$ content_shell --dump-render-tree web/test_index.html

Content-Type: text/plain
PASS
All 2 tests passed
Col...
Server
Web framework
server.dart
import 'package:start/start.dart';
start(public: 'web', port: port).then((Server app) {
app.post...
Web framework
server.dart
import 'package:start/start.dart';
start(public: 'web', port: port).then((Server app) {
app.post...
server.dart
void main() {
...
app.post("/").listen((request) {
String url = request.param('url');
String hash = toHash(url...
server.dart
void main() {
...
app.post("/").listen((request) {
String url = request.param('url');
String hash = toHash(url...
server.dart
void main() {
...
app.post("/").listen((request) {
String url = request.param('url');
String hash = toHash(url...
server.dart
void main() {
...
app.post("/").listen((request) {
String url = request.param('url');
String hash = toHash(url...
server.dart
void main() {
...
app.get('/:hash').listen((request) {
String hash = request.param('hash');
client.get(hash).t...
server.dart
void main() {
...
app.get('/:hash').listen((request) {
String hash = request.param('hash');
client.get(hash).t...
server.dart
void main() {
...
app.get('/:hash').listen((request) {
String hash = request.param('hash');
client.get(hash).t...
Server tests
server_tests.dart
import 'package:unittest/unittest.dart';
import 'package:unittest/vm_config.dart';
import 'server.dart' ...
server_tests.dart
import 'package:unittest/unittest.dart';
import 'package:unittest/vm_config.dart';
import 'server.dart' ...
server_tests.dart
import 'package:unittest/unittest.dart';
import 'package:unittest/vm_config.dart';
import 'server.dart' ...
Run the test
$ dart server_tests.dart
PASS: HashURL
Deployment
Deployment
$ heroku create
$ heroku config:add BUILDPACK_URL=...
$ heroku addons:add redistogo
$ git push heroku
How many OS/browser combos?

200+
Cross-browser testing
Dart + Selenium
browser_tests.dart
void main() {
...
driver = WebDriver.createDriver(
url: “http://localhost:4444/wd/hub”,...
Dart + Selenium
browser_tests.dart
void main() {
...
test('integration test', (){
return driver.findElement(new By.id('url...
Sauce Labs
saucelabs.com/tests
Continuous Integration
drone.io
https://drone.io
Build Configuration
image: dart
script:
- pub get
- pub build
- dart bin/server_test.dart
deploy:
heroku:
app: dart-demo
Build Configuration
image: dart
script:
- pub get
- pub build
- dart bin/server_test.dart
deploy:
heroku:
app: dart-demo
Build Configuration
image: dart
script:
- pub get
- pub build
- dart bin/server_test.dart
deploy:
heroku:
app: dart-demo
drone.io
https://drone.io
What have we learned?
✓
✓
✓
✓
✓

Built Dart app
Client & server
Database persistence
Tested
Deployed

✓ Language features
...
What should you do?
Try Dart
Test things
Use tools
Deploy!
Thank you!
Questions?
Dart Power Tools
Upcoming SlideShare
Loading in …5
×

Dart Power Tools

1,566 views

Published 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.

Published in: Technology, Business
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total views
1,566
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
3
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

Dart Power Tools

  1. 1. Dart Power Tools Brad Rydzewski & Matt Norris @bradrydzewski @mattnorrisme
  2. 2. Dart 1.0!
  3. 3. Demo github.com/bradrydzewski/dart-url-shortener
  4. 4. What will we learn? Build Dart app Database persistence Test Deploy Language features Tools Continuous Integration
  5. 5. Client
  6. 6. Including Dart index.html <html> ... <script type="application/dart” src="index.dart"></script> <script src="packages/browser/dart.js"></script> ... </html>
  7. 7. Including Dart index.html <html> ... <script type="application/dart” src="index.dart"></script> <script src="packages/browser/dart.js"></script> ... </html>
  8. 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. 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. 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. 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. 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. 13. index.dart void onClick(MouseEvent event) { HttpRequest request = new HttpRequest(); request.onReadyStateChange.listen((_) { showText(request.responseText); }); ... ... request.send(); }
  14. 14. index.dart void onClick(MouseEvent event) { HttpRequest request = new HttpRequest(); request.onReadyStateChange.listen((_) { showText(request.responseText); }); ... ... request.send(); }
  15. 15. index.dart void onClick(MouseEvent event) { HttpRequest request = new HttpRequest(); request.onReadyStateChange.listen((_) { showText(request.responseText); }); ... ... request.send(); }
  16. 16. index.dart void onClick(MouseEvent event) { HttpRequest request = new HttpRequest(); request.onReadyStateChange.listen((_) { showText(request.responseText); }); ... ... request.send(); }
  17. 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. 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. 19. Demo github.com/bradrydzewski/dart-url-shortener
  20. 20. I must have put a decimal point in the wrong place. I always mess up some mundane detail!
  21. 21. Client tests
  22. 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. 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. 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. 25. HTML unit test
  26. 26. content_shell $ content_shell --dump-render-tree web/test_index.html Content-Type: text/plain PASS All 2 tests passed Collapse All
  27. 27. Server
  28. 28. Web framework server.dart import 'package:start/start.dart'; start(public: 'web', port: port).then((Server app) { app.post('/’).listen((request) { ... }); });
  29. 29. Web framework server.dart import 'package:start/start.dart'; start(public: 'web', port: port).then((Server app) { app.post('/’).listen((request) { ... }); });
  30. 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. 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. 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. 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. 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. 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. 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. 37. Server tests
  38. 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. 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. 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. 41. Run the test $ dart server_tests.dart PASS: HashURL
  42. 42. Deployment
  43. 43. Deployment $ heroku create $ heroku config:add BUILDPACK_URL=... $ heroku addons:add redistogo $ git push heroku
  44. 44. How many OS/browser combos? 200+
  45. 45. Cross-browser testing
  46. 46. Dart + Selenium browser_tests.dart void main() { ... driver = WebDriver.createDriver( url: “http://localhost:4444/wd/hub”, desiredCapabilities: Capabilities.android); ...
  47. 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. 48. Sauce Labs saucelabs.com/tests
  49. 49. Continuous Integration
  50. 50. drone.io https://drone.io
  51. 51. Build Configuration image: dart script: - pub get - pub build - dart bin/server_test.dart deploy: heroku: app: dart-demo
  52. 52. Build Configuration image: dart script: - pub get - pub build - dart bin/server_test.dart deploy: heroku: app: dart-demo
  53. 53. Build Configuration image: dart script: - pub get - pub build - dart bin/server_test.dart deploy: heroku: app: dart-demo
  54. 54. drone.io https://drone.io
  55. 55. What have we learned? ✓ ✓ ✓ ✓ ✓ Built Dart app Client & server Database persistence Tested Deployed ✓ Language features ✓ Tools ✓ Continuous Integration
  56. 56. What should you do? Try Dart Test things Use tools Deploy!
  57. 57. Thank you! Questions?

×