Uploaded on

 

More 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,823
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
32
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