Develop Hip APIs and Apps with Spring Boot and Angular - Connect.Tech 2017

Building a modern web application requires a lot of tools, frameworks, and techniques. This session shows how JHipster unites popular frameworks such as Angular, Spring Boot, and Bootstrap. Learn how Yeoman, a scaffolding tool for modern web apps, works with JHipster to generate a project that uses Java 8, SQL or NoSQL databases, Spring profiles, Maven or Gradle, Webpack, WebSockets, and BrowserSync. It also supports a number of different authentication mechanisms, including classic session-based auth, OAuth 2.0, and JWT-based authentication. For production deployments, JHipster includes out-of-the-box support for AWS, Cloud Foundry, Heroku, Docker, and Kubernetes.

Transcript

1. Matt Raible | @mraible
   Develop Hip APIs and Apps with
   Spring Boot and Angular
   September 21, 2017 Connect.Tech
   https://www.flickr.com/photos/rockmixer/2806330093
   

   View Slide

2. Blogger on raibledesigns.com
   Web Developer and Java Champion
   Father, Skier, Mountain Biker,
   Whitewater Rafter
   Open Source Connoisseur
   Who is Matt Raible?
   Bus Lover
   Okta Developer Advocate
   

   View Slide

3. View Slide

4. View Slide

5. View Slide

6. Authentication Standards
   

   View Slide

7. What about YOU?
   Are you a Java Developer? Web Developer?
   
   How long have you been doing web development?
   
   Do you like JSF? Do you like GWT?
   
   Do you like JavaScript?
   

   View Slide

8. Do you want to be a hip Java Developer?
   

   View Slide

9. Java 8
   Parallel Collections
   
   JSR 310 Date and Time API
   
   Functional Interfaces with default method
   
   Lambda Expressions (a.k.a. Closures)
   
   Nashorn JavaScript Engine
   

   View Slide

10. Hipster
    n. noun
    
    1. One who is exceptionally aware of or interested in the latest trends
    and tastes.
    

    View Slide

11. View Slide

12. Latest trends in JavaLand?
    Microservices
    
    Embedded App Servers
    
    Deployment with Containers
    
    Environments: dev, test, production
    
    Annotations
    
    Monitoring
    

    View Slide

13. Spring Boot
    Automatically configures Spring whenever possible
    
    Provides production-ready features such as metrics,
    health checks and externalized configuration
    
    Absolutely no code generation and no requirement for
    XML configuration
    
    Embeds Tomcat, Jetty or Undertow directly
    

    View Slide

14. SPRING INITIALIZR @ start.spring.io
    

    View Slide

15. @SpringBootApplication
    public class DemoApplication {
    public static void main(String[] args) {
    SpringApplication.run(DemoApplication.class, args);
    }
    }
    @Entity
    class Blog {
    @Id
    @GeneratedValue
    private Long id;
    private String name;
    // getters, setters, toString(), etc
    }
    @RepositoryRestResource
    interface BlogRepository extends JpaRepository {
    }
    

    View Slide

16. @SpringBootApplication
    class NotesApplication
    fun main(args: Array) {
    SpringApplication.run(NotesApplication::class.java, *args)
    }
    @Entity
    data class Note(@Id @GeneratedValue var id: Long? = null,
    var text: String? = null,
    @JsonIgnore var user: String? = null)
    @RepositoryRestResource
    interface NotesRepository : JpaRepository
    

    View Slide

17. View Slide

18. @spring_io
    #springio17
    Microservices with Spring Boot
    https://developer.okta.com/blog/2017/06/15/build-microservices-architecture-spring-boot
    

    View Slide

19. Latest trends in Web Development?
    Progressive Web Applications
    
    JavaScript MVC Frameworks
    
    CSS 3 with Animations
    
    Mobile First
    
    Front-End Optimization
    
    REST APIs
    

    View Slide

20. View Slide

21. View Slide

22. @spring_io
    #springio17
    Jobs on Indeed
    September 2017
    0
    1,750
    3,500
    5,250
    7,000
    Angular Aurelia Backbone Ember Knockout React Vue
    

    View Slide

23. @spring_io
    #springio17
    Stack Overflow Tags
    September 2017
    0
    20,000
    40,000
    60,000
    80,000
    Angular Aurelia Backbone Knockout Ember React Vue
    

    View Slide

24. @spring_io
    #springio17
    GitHub Stars
    August 2017
    0
    20,000
    40,000
    60,000
    80,000
    Angular Aurelia Backbone Knockout Ember React Vue
    

    View Slide

25. @spring_io
    #springio17
    GitHub Star Growth
    

    View Slide

26. Wouldn’t it be hip if…?
    ⚭
    

    View Slide

27. JHipster www.jhipster.tech
    

    View Slide

28. #DevoxxPL
    JHipster is Open Source
    Web Statistics, August 2017
    
    319K Page Views / 422K on GitHub
    
    41K Downloads
    
    GitHub Statistics
    
    8075 Stars
    
    361 Contributors
    

    View Slide

29. JHipster
    Spring Boot
    
    Spring Security
    
    AngularJS
    
    Angular
    
    Bootstrap
    
    Metrics
    
    Maven or Gradle
    
    Authentication Type: cookie-based (with
    Social), JWT, or OAuth 2.0
    
    Type of Database: SQL or NoSQL
    
    Caching: EhCache or Hazelcast
    
    Elasticsearch
    
    Gulp.js or Webpack
    Foundational Frameworks Project Options
    

    View Slide

30. How to use JHipster
    To install JHipster and Yeoman, use npm:
    npm install -g yo generator-jhipster
    Then create a directory and cd into it:
    mkdir myapp && cd myapp
    Then run Yeoman:
    yo jhipster
    

    View Slide

31. Generate a basic blog application
    
    Look at its files and configuration
    
    

    Generate the CRUD entities
    
    Limit blogs to current user, allow HTML
    
    Deploy to
    Demo Time!
    … all in 20 minutes!
    

    View Slide

32. Demo Entity Diagram
    

    View Slide

33. Get Started with JHipster 4 Demo
    

    View Slide

34. JHipster Tools
    IntelliJ IDEA, Eclipse, Netbeans, and Visual Studio Code
    
    Vagrant JHipster Development Box
    
    Docker Installation
    
    Docker Compose
    
    JDL and JDL Studio
    
    JHipster-UML
    

    View Slide

35. View Slide

36. JHipster is Knowledge
    

    View Slide

37. The JHipster Mini-Book
    Written with Asciidoctor
    
    Quick and to the point, 130 pages
    
    Developed a Real World App:
    
    www.21-points.com
    
    Free Download from
    
    www.infoq.com/minibooks/jhipster-mini-book
    

    View Slide

38. Lines of Code in 21-Points
    0
    5750
    11500
    17250
    23000
    Project Created Entities Generated Business Logic and UI
    22,876
    21,355
    15,173
    

    View Slide

39. Project Creation
    Entities Generated
    Biz Logic and UI
    0 5000 10000 15000 20000
    2,955
    2,653
    1,827
    7,261
    6,826
    4,256
    8,078
    7,431
    5,612
    Java TypeScript HTML
    Lines of Code by Language
    

    View Slide

40. Learn More
    twitter.com/java_hipster
    
    www.jhipster.tech
    
    github.com/jhipster/generator-jhipster
    
    Get Started with JHipster 4: https://youtu.be/XRREt1KB4Y8
    
    JHipster Microservices, Google Cloud, and Kubernetes

    https://youtu.be/dgVQOYEwleA
    

    View Slide

41. Getting Help
    stackoverflow.com/tags/jhipster
    
    gitter.im/jhipster/generator-jhipster
    
    github.com/jhipster/.../CONTRIBUTING.md
    
    groups.google.com/.../jhipster-dev
    

    View Slide

42. What’s New and Next?
    http://start.jhipster.tech now available!
    
    JHipster Registry v3
    
    Spring Boot 2.0 / Spring Webflux
    
    React Support
    
    OAuth 2.0 / OIDC Support
    https://www.slideshare.net/julien.dubois/jhipster-overview-and-roadmap-august-2017
    

    View Slide

43. developer.okta.com/blog
    

    View Slide

44. https://virtualjug.com/building-robust-apis-and-apps-with-spring-boot-and-angular/
    

    View Slide

45. Action!
    Try Spring Boot
    
    Try Angular
    
    Try JHipster
    
    Explore PWAs
    
    Enjoy the bootiful experience!
    

    View Slide

46. Questions?
    Keep in touch!
    
    raibledesigns.com
    
    @mraible
    
    Presentations
    
    speakerdeck.com/mraible
    
    Code
    
    github.com/oktadeveloper
    

    View Slide