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

How to be hip with JHipster & React

How to be hip with JHipster & React

Facebook Developer Circles - Morroco 2018

7f408bc67dc9ae3b288ee92d16d3c4c2?s=128

Deepu K Sasidharan

February 21, 2018
Tweet

Transcript

  1. How to be hip with JHipster & React By Deepu

    K Sasidharan 07-Feb-2018
  2. Deepu K Sasidharan Javascript Evangelist Co-lead Senior product developer Robotics

    & Astronomy enthusiast @deepu105 | deepu.js.org https://www.packtpub.com/application-development/full-sta ck-development-jhipster
  3. Agenda • JHipster introduction • Available options • Status of

    React support in JHipster, compared to Angular • Demo of application generated with React as client framework • Client-side architecture using React and Redux • Roadmap
  4. Why JHipster? • Most popular application generation tool in the

    Java world ◦ 9,300+ GitHub stars, 400+ contributors ◦ More than 1 million installations, 50k+ per month ◦ 200+ companies officially using it http://www.jhipster.tech/companies-using-jhipster/ ◦ Won last year’s a Duke’s choice award for extreme innovation and a Jax Innovation Award • Fully Open Source • Built on Spring Boot + Angular or React • Microservice support using the Netflix OSS libraries • Powerful domain modeling using JDL Studio - https://start.jhipster.tech/jdl-studio/
  5. How to JHipster? • Using JHipster online - https://start.jhipster.tech •

    Using the JHipster CLI - npm install -g generator-jhipster
  6. Options available - client-side

  7. Options available - server-side

  8. Options available - Cloud/CI/CD

  9. React support - status • Base application generation • Most

    of the admin screens including user management • Security and Authentication • Entity creation with simple relationships
  10. Demo time yarn global add generator-jhipster or npm i -g

    generator-jhipster mkdir myApp && cd myApp jhipster --experimental --experimental flag will not be required in v5
  11. React client side architecture • Typescript • Redux + react-redux

    + Axios + Promise middleware + redux-thunk • React router v4 • Bootstrap 4 + Reactstrap • Lodash, MomentJS • Tslint + tslint-eslint + tslint-react • Karma + Mocha + Chai + Enzyme for unit tests • Protractor + Mocha + Chai for e2e tests • Sass support • Custom i18n support with react-jhipster library • Webpack setup close to our Angular setup • Prettier
  12. Roadmap for v5 Full React support Official blueprint support Spring

    Boot 2 Reactive API support with Spring Webflux Java 9 AWS containers
  13. Thank you Docs - http://www.jhipster.tech/ Contribution are welcome - https://github.com/jhipster/generator-jhipster/blob/master/CONTRIBUTING.md

    React support tracker issue - https://github.com/jhipster/generator-jhipster/issues/6044 JHipster book - https://www.packtpub.com/application-development/full-stack-development-jhipster