Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Reallife experience with Dart

Reallife experience with Dart

I could show my Slack Chatbot written in Dart. It covers websockets, an API w/ redstone and a little bit AngularDart for the frontend.

Sebastian

July 27, 2016
Tweet

More Decks by Sebastian

Other Decks in Programming

Transcript

  1. Reallife experience
    with Dart
    ViennaJS
    @Sgoettschkes
    https://stocksnap.io/photo/LTB7BB80VH

    View Slide

  2. View Slide

  3. View Slide

  4. blitzlicht
    Improve communication by asking simple questions.
    1. Ask one question
    2. Have people answer in their own words
    3. Get insights

    View Slide

  5. blitzlicht in Action

    View Slide

  6. blitzlicht in Action

    View Slide

  7. blitzlicht in Action

    View Slide

  8. Code example

    View Slide

  9. Code example
    Websockets

    View Slide

  10. Code example
    void connect(String url) {
    WebSocket.connect(url).then((WebSocket websocket) {
    websocket.pingInterval = new Duration(seconds: 5);
    websocket.listen(process, onDone: reconnect, onError: reconnect);
    });
    }

    View Slide

  11. Code example
    void connect(String url) {
    WebSocket.connect(url).then((WebSocket websocket) {
    websocket.pingInterval = new Duration(seconds: 5);
    websocket.listen(process, onDone: reconnect, onError: reconnect);
    });
    }

    View Slide

  12. Code example
    void process(String message) {
    Map data = JSON.decode(message);
    // ... do something
    }

    View Slide

  13. Code example
    API

    View Slide

  14. Code example
    import 'package:redstone/redstone.dart' as app;
    void main() {
    app.start();
    }

    View Slide

  15. Code example
    @app.Group('/api/blitzlichts')
    class BlitzlichtService {
    @app.Route('/:id')
    read(String id, @Repo() Repository repo) async {
    Blitzlicht blitzlicht =
    await repo.findOne(where.id(new ObjectId.fromHexString(id)));
    return blitzlicht.toMap();
    }
    }

    View Slide

  16. Code example
    @app.Group('/api/blitzlichts')
    class BlitzlichtService {
    @app.Route('/:id')
    read(String id, @Repo() Repository repo) async {
    Blitzlicht blitzlicht =
    await repo.findOne(where.id(new ObjectId.fromHexString(id)));
    return blitzlicht.toMap();
    }
    }

    View Slide

  17. Code example
    @app.Group('/api/blitzlichts')
    class BlitzlichtService {
    @app.Route('/:id')
    read(String id, @Repo() Repository repo) async {
    Blitzlicht blitzlicht =
    await repo.findOne(where.id(new ObjectId.fromHexString(id)));
    return blitzlicht.toMap();
    }
    }

    View Slide

  18. Code example
    @app.Group('/api/blitzlichts')
    class BlitzlichtService {
    @app.Route('/:id')
    read(String id, @Repo() Repository repo) async {
    Blitzlicht blitzlicht =
    await repo.findOne(where.id(new ObjectId.fromHexString(id)));
    return blitzlicht.toMap();
    }
    }

    View Slide

  19. Code example
    AngularDart

    View Slide

  20. Code example
    import 'package:angular2/platform/browser.dart';
    import 'package:blitzlicht/client/app_component.dart';
    void main() {
    bootstrap(AppComponent);
    }

    View Slide

  21. Code example



    >


    View Slide

  22. Code example


    Loading ...


    View Slide

  23. Code example
    @Component(
    directives: const [ROUTER_DIRECTIVES],
    providers: const [ROUTER_PROVIDERS],
    selector: 'blitzlicht',
    templateUrl: 'app_component.html')
    @RouteConfig(const [
    const Route(
    path: '/', name: 'Index', component: IndexComponent, useAsDefault: true),
    ])
    class AppComponent implements OnInit {
    Future ngOnInit() async {
    print('THIS IS BLITZLICHT');
    }
    }

    View Slide

  24. Code example
    import 'package:angular2/core.dart';
    import 'package:angular2/router.dart';
    @Component(
    directives: const [ROUTER_DIRECTIVES],
    selector: 'index',
    templateUrl: 'index_component.html')
    class IndexComponent {}

    View Slide

  25. View Slide

  26. Summary
    https://pixabay.com/en/milky-way-andromeda-stars-galaxy-923801/

    View Slide

  27. https://www.dropbox.com/s/6z5aiwa8l09g2pa/86H.jpg

    View Slide