Your SlideShare is downloading. ×
  • Like
Dart Workshop
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply
Published

 

Published in Technology , Sports
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
6,908
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
33
Comments
0
Likes
4

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 Workshop by Dmitry Buzdin July 2013, Riga
  • 2. You should be here today!
  • 3. Brought toYou By
  • 4. Workshop Preparation
  • 5. Get Dart http://www.dartlang.org/#get-started
  • 6. WhatYou Get • Dart SDK • Dart Editor (Eclipse-based) • DartiumVM • Chromium with DartVM • Command line tools • Samples
  • 7. IDE
  • 8. Prerequisites • dart installed • dart2js installed • pub installed • Dartium installed • IDE (Dart Editor, IntelliJ, Sublime,VIM)
  • 9. Knowledge Required • HTML/CSS basics • JavaScript basics • OOP basics • FP basics
  • 10. Join the Dart Side
  • 11. Why Dart? • JavaScript is broken • Quest for holy grail is on • One language for client and server • Node.js is not an option
  • 12. DartVM • Speed • Multithreading via Isolates
  • 13. Dart Compiler • Compiles to JavaScript • Runs in all modern browsers • DartVM is faster thanV8 • (according to Google)
  • 14. Dart Language • Similar to Java and JavaScript http://try.dartlang.org/
  • 15. Main Features • Functions • Closures • Concurrency • Modularity • OOP http://www.dartlang.org/docs/dart-up-and-running/ contents/ch02.html
  • 16. Optional Type Safety • Checked during development • Compiled-out in production
  • 17. Dart Timeline • Inspired by Java, JavaScript, GWT • Revealed in October 2011 • Frequent public releases • June 19, 2013 First Beta version • Production ~2014
  • 18. Warning: Dart is hot! Code shown will not probably work after two months
  • 19. Workshop
  • 20. Browser DartVM Client Dart Code DartVM Server Dart Code MongoDB HTTP HTTP
  • 21. Ways of Working • Working in pairs • Writing automated tests • 5 Steps to complete • Solutions available online https://github.com/buzdin/dart-workshop
  • 22. • Part I : Hello, Dart! • Part II : Integrating Google Maps • Part III: Dynamic HTML • Part IV:Adding Server-Side • PartV:Adding MongoDB
  • 23. Part I : Hello Dart
  • 24. Tasks • Learn application directory structure • Run client and server side code • Check output in Dartium console • Write new unit tests • Check that they work • Learn to use debugger
  • 25. Base Project Structure Modules Tests Client Dependencies Symbolic Link http://pub.dartlang.org/doc/package-layout.html
  • 26. Pub Package Manager • Same as npm (JavaScript) or Maven (Java) • pubspec.yaml - application dependencies • pubspec.lock - exact versions http://pub.dartlang.org/
  • 27. pubspec.yaml name: dart_workshop dependencies: browser: any unittest: any Latest version http://pub.dartlang.org/doc/pubspec.html
  • 28. Fetch Dependencies pub install Resolving dependencies................ Downloading fukiya 0.1.9 from hosted... Downloading formler 0.0.8 from hosted... Dependencies installed!
  • 29. Unit Testing void main() { test('QuickSort', () => expect(quickSort([5, 4, 3, 2, 1]), orderedEquals([1, 2, 3, 4, 5])) ); test('Partition', () { List array = [3, 2, 1]; int index = _partition(array, 0, array.length-1, 1); expect(index, equals(1)); expect(array, orderedEquals([1, 2, 3])); }); }
  • 30. Bootstrap Dart (1) <!DOCTYPE html> <html> <head> <title>Dart Workshop</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <script type="application/dart" src="main.dart"></script> <script src="packages/browser/dart.js"></script> </body> </html>
  • 31. Bootstrap Dart (1I) // This is Dart Application void main() { sayHello("Hello, Dart!"); } void sayHello() { print("Hello"); }
  • 32. Running Dart
  • 33. Debugging
  • 34. You Learned • Dart project structure • Running and debugging Dart • Writing and running unit tests
  • 35. Part II : Integrating Google Maps
  • 36. Tasks • Integrate Google Maps • Add event handlers • Draw custom map markers
  • 37. import 'dart:html'; import 'package:js/js.dart' as js; import 'package:google_maps/google_maps.dart'; void main() { js.context.google.maps.visualRefresh = true; final mapOptions = new MapOptions() ..zoom = 13 ..center = new LatLng(56.946843515558456, 24.13162512207032) ..mapTypeId = MapTypeId.ROADMAP ; final map = new GMap(query("#map_canvas"), mapOptions); js.retain(map); } Adding Google Maps <div id="map_canvas"></div> <script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> dependencies: google_maps: any #map_canvas { height: 100%; margin: 0; }
  • 38. Handling Map Events map.onCenterChanged.listen((ignore) { print(map.center); }); map.onZoomChanged.listen((ignore) { print(map.zoom); }); map.onClick.listen((event) { print(event.latLng); });
  • 39. Drawing Markers var marker = new Marker( new MarkerOptions() ..position = new LatLng(56.946, 24.131) ..map = map ..title = 'Best Place in the World!' ..icon = 'icon.png' ); http://www.iconarchive.com/ Pick your own icon!
  • 40. Event Streams http://www.dartlang.org/articles/feet-wet-streams/ TODO
  • 41. You Learned • Adding JavaScript libraries • Integrating Google Maps API • Using event Streams • Picking icons
  • 42. Part III : Dynamic HTML
  • 43. Tasks • Draw input form for place name and icon • Show/hide DOM elements • Attach custom DOM event handlers
  • 44. JQuery in Dart import 'dart:html'; Element elem1 = query('#an-id'); // Find an element by id (an-id). Element elem2 = query('.a-class'); // Find an element by class (a-class). List<Element> elems1 = queryAll('div'); // Find all elements by tag (<div>). List<Element> elems2 = queryAll('input[type="text"]'); // Find all text inputs. // Find all elements with the CSS class 'class' inside of a <p> // that is inside an element with the ID 'id'. List<Element> elems3 = queryAll('#id p.class'); http://api.dartlang.org/docs/releases/latest/dart_html.html
  • 45. Manipulating DOM <div id="form"> <input id="name" type="text"/> <input id="icon" type="text"/> </div> var name = query('#name').value; query('#name').value = ‘New Value’; query('#form').hidden = true;
  • 46. Reacting on Events map.onClick.listen((event) { var name = query('#name').value; var icon = query('#icon').value; savePlace(name, icon, event.latLng); });
  • 47. You Learned • JQuery is built-in in Dart • Learned to manipulate DOM • Learned to attach event handlers
  • 48. Part IV :Adding Server
  • 49. Tasks • Draw input form for place name and icon • Show/hide DOM elements • Attach custom DOM event handlers
  • 50. REST API POST /api/places GET /api/places?near=lat,long
  • 51. Place JSON { name:“Name”, loc: [53.2114, 24.5623], icon:“http://iconarchive.com/icon.png” }
  • 52. HTTP Server import 'dart:io'; import 'dart:json'; main() { HttpServer.bind('127.0.0.1', 8080).then((server) { server.listen((HttpRequest request) { request.response.write(“Hello!”); request.response.close(); }); }); }
  • 53. Too much code, lets take existing solution
  • 54. Fukiya Server http://pub.dartlang.org/packages/fukiya void main() { new Fukiya() ..get('/', getHandler) ..put('/', putHandler) ..delete('/', deleteHandler) ..post('/', postHandler) ..get('/testing', (FukiyaContext context) { context.send("This is testing."); }) ..get('/:userid', getDynamicHandler) ..staticFiles('./test/static') ..use(new FukiyaFormParser()) ..use(new FukiyaJsonParser()) ..listen('127.0.0.1', 3333); }
  • 55. Working with JSON String str = stringify( { 'key': 42, 'value': 'text', 'p': ['A', 'B'] } ); Map doc = parse(str); import 'dart:json';
  • 56. Our Web Server import 'package:fukiya/fukiya.dart'; main() { new Fukiya() ..get('/api/places', getHandler) ..post('/api/places', postHandler) ..staticFiles('web') ..use(new FukiyaJsonParser()) ..listen('127.0.0.1', 8080); } > dart bin/server.dart void postHandler(FukiyaContext context) { print(context.params); print(context.parsedBody); context.send("OK"); context.jsonResponse(json); }
  • 57. Server HTTP Client import 'package:http/http.dart' as http; void main() { http.get('http://127.0.0.1:8080').then((response) { print(response.body); }); } http://pub.dartlang.org/packages/http
  • 58. Test Example test("should-get", () { http.get('http://127.0.0.1:8080/api/places?near=1,2') .then(expectAsync1((response) { expect(response.statusCode, equals(200)); expect(response.body, equals('[]')); })); });
  • 59. Browser Ajax Client import 'dart:html'; import 'dart:async'; import 'dart:json'; main() { HttpRequest.getString(uri).then(processString); } processString(String jsonText) { Map object = parse(jsonText); println(object); } http://www.dartlang.org/articles/json-web-service/
  • 60. Posting Data var request = new HttpRequest(); request.open('POST', '/api/places'); request.setRequestHeader("Content-Type", "application/json"); request.send(json);
  • 61. Timers new Timer.periodic( new Duration(seconds:5), (timer) { print("timer triggered"); loadPlaces(map); }); Refresh list of places every few seconds import 'dart:async'; http://api.dartlang.org/docs/releases/latest/dart_async/ Timer.html
  • 62. You Learned • Server side is “easy” • Testing HTTP services • Creating Ajax client • Using JSON
  • 63. PartV :Adding MongoDB
  • 64. Tasks • Connect to real Cloud database! • Replace in-memory database with real one • Write tests
  • 65. MongoDB • No schema • JSON as data format • JSON as query language
  • 66. MongoDB in 3 minutes Database Collection Document Database Table Record
  • 67. Database Records { name:“Name”, loc: [53.2114, 24.5623], icon:“http://iconarchive.com/icon.png” }
  • 68. Database Query db.products.find({qty: {$gt: 25}})
  • 69. Mongo Dart Driver import 'package:mongo_dart/mongo_dart.dart'; var db = new Db(url); db.open().then((c) { DbCollection places = db.collection("places"); places.insert({ "name": "Place", "loc": [56, 23], "icon”: "Place" }); }); name: dart_workshop dependencies: mongo_dart: any
  • 70. Geolocation Queries var db = new Db(DB_URL); db.open().then((c) { db.ensureIndex("places", key: "loc", name: "2d"); DbCollection places = db.collection("places"); places.find(where.near("loc", {'$geometry': {"type" : "Point", "coordinates" : [23, 23]} }, 10000)).each((place) { print(place); }).then((ignore) { db.close(); }); });
  • 71. MongoLab Account • mongodb:// dart:dartIsKing@ds035338.mongolab.com: 35338/dart-workshop • mongo ds035338.mongolab.com:35338/ dart-workshop -u dart -p dartIsKing
  • 72. You Learned • Future based API • Used Mongo Geolocation Queries • Mongo Dart library sucks! • Write full-stack Dart applications!
  • 73. Conclusions
  • 74. Dart is better than JavaScript!
  • 75. Dart is the future!? Discuss!
  • 76. Materials • http://pub.dartlang.org/doc/package-layout.html • http://yulian.kuncheff.com/blog/2013/03/21/using-intellij-slash-webstorm-to-debug-web-applications/ • http://www.youtube.com/watch?v=N8GCNilJhT4 • http://docs.mongodb.org/manual/reference/operator/query-geospatial/ • https://developers.google.com/maps/documentation/javascript/reference