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

Getting Into Vue.js

Getting Into Vue.js

Presentation I gave at MelbJS about Vue.js and an application I built using it with Amazon Cognito.

Mark Wolfe

March 08, 2017
Tweet

More Decks by Mark Wolfe

Other Decks in Programming

Transcript

  1. Getting Into Vue
    Mark Wolfe Developer @ Versent

    View Slide

  2. Welcome
    • @wolfeidau on Twitter and Github
    • Who is Versent?

    View Slide

  3. Vue.js
    • Javascript Framework
    • Easy to get started
    • Helps you provide win to users
    • Small and Fast

    View Slide

  4. vue init
    • Starter templates
    • webpack
    • webpack-simple
    • simple
    • Developer experience is front and centre!

    View Slide

  5. Testing!?
    • Mocha / Chai used for unit testing
    • Nightwatch for e2e testing
    • Documentation is very thin for testing

    View Slide

  6. UI Toolkits
    • Vue Material
    • Element UI
    • This one even has tests!
    • I just used bootstrap..

    View Slide

  7. Amazon Cognito

    View Slide

  8. Amazon Cognito
    • Identity as a service
    • Designed for Web and Mobile applications
    • Tightly integrated into the AWS “serverless"
    ecosystem
    • Rich API

    View Slide

  9. Identity As a Service?
    • Sign Up
    • Verify your Email or Mobile No
    • Sign In
    • Supports MFA
    • Password Change and Recovery
    • Server side encryption of ALL data
    • Save User Settings
    • No Servers where harmed during setup..

    View Slide

  10. Configuring Cognito
    • Configure an internal pool of users
    • Associate that pool with the identity service
    • Assign some IAM policies
    • Include the SDK in your application

    View Slide

  11. Register (1)
    Amazon Cognito
    User Pools
    Verification SMS or Email (2)
    Confirmation (3)
    Authenticate Via SRP (5)
    JWT Token (6)
    Sucessful Registration (4)

    View Slide

  12. Demo
    • https://cognito-vue-bootstrap.wolfe.id.au/
    • Self service demonstration!
    • Code is at https://github.com/wolfeidau/cognito-
    vue-bootstrap

    View Slide

  13. View Slide

  14. Takeaways
    • Vue.js is great “framework” for those getting started
    with new world SPA.
    • Lots to learn from their approach to developer
    happiness
    • Security should always be front and centre when
    building web applications
    • Amazon Cognito is great if you are already working
    in AWS

    View Slide

  15. Questions
    • @wolfeidau on twitter and github
    [email protected]

    View Slide

  16. Links
    • https://vuejs.org
    • https://aws.amazon.com/cognito/
    • https://github.com/awslabs/aws-cognito-angular2-
    quickstart
    • http://srp.stanford.edu

    View Slide