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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Dart Workshop

7,053

Published on

Published in: Technology, Sports
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
7,053
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
40
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

×