どんな内容？

最新のWebアプリケーションの開発についての話です

モダンなWebアプリケーション

エンドユーザーの要求は進化しています。人々は、遅く、反応しない Web サイトにうんざりしています。彼らが求めているのは、

• 美しいデザイン
• ページが読み込まれるまでの待ち時間を短縮
• ページの一部の動的な更新

最新のHTML5/CSS3/JavaScriptの技術を使用する必要があります

デベロッパーの生産性

そのようなウェブサイトは、速くデリバリされるべきです。

アプリケーションが「デプロイ」されるのを1分も待つのは、もう許されない

正しい道具が必要です！

プロダクションレディソフトウェア

現代のウェブサイトは、膨大な数の同時ユーザーを処理する必要があります

大規模なRESTfulアプリケーションを使用しており、バックエンドサーバーに大きな負荷がかかります。

堅牢でスケーラブルな高性能のサーバーが必要

その課題を解決することが私たちの目標です

• 最新のHTML5/CSS3/JavaScriptフレームワークによる、美しいフロントエンド
• 最新のJava/キャッシュ/データアクセス技術による堅牢で高品質なバックエンド
• セキュリティとパフォーマンスが考慮された状態で自動的に構築される
• そして、最大の生産性を実現するための優れた開発者用ツール

クライアント技術

Yeoman, Webpack, Angular, React, Bootstrap

NPM

• 高速で信頼性の高い依存関係管理
• すべてのクライアントサイドツールのインストールと実行に使用

                            npm install -g generator-jhipster
                        

Yeoman

アプリケーションジェネレータを提供

• 数百種類のジェネレーターが使用可能
• 主にJavaScriptのフロントエンドアプリケーションを対象としています
• トップクラスのジェネレータが持つ優れた品質

                            jhipster
                        

Webpack

クライアント資材のためのモジュールバンドルラー

• フロントエンドのコンパイル、最小化、最適化
• Angular/React+TypeScriptのコンパイルとホットロードを行うための必須ツール
• クライアントサイドでの効率的なプロダクションビルドを可能に

BrowserSync

アプリケーションの変更をホットリロード

• コードが変更されたときに自動的にブラウザをリフレッシュする
• 複数のブラウザをリアルタイムに同期でき、変更点を即座に確認可能

                            npm start
                        

Jest

JavaScriptコードに対してユニットテストを実行

• 仮想DOM技術であるjsdomで動作
• 非常に高速で、バックグラウンドで継続的に実行可能

                            npm test
                        

AngularとReact

最も人気のある2つのJavaScriptフレームワーク

• JHipsterはAngularとReactの両方をサポート
• 強力かつ習得しやすい
• データバインディング、フォームバリデーション、国際化...すべて即使用可能

Bootstrap

レスポンシブWebアプリケーションのための優れたCSS/JavaScriptフレームワーク

• 一般的な使い方のCSSとHTML要素
• メニュー、ナビバー、ドロップダウンボックス、アラートなど、豊富なJavaScriptコンポーネントを搭載

                            

    Hello, world!

                            
                        

サーバー技術

Maven, Spring, Spring MVC REST, Spring Data JPA, Netflix OSS

Maven | Gradle

最も人気のあるJavaビルドツール

• よく知られている定義されたディレクトリとゴール
• 主要なIDEとの統合
• SpringBootやYeomanを含む、優れたプラグインエコシステム

                            
./mvnw spring-boot:run
                            
                            
./gradlew bootRun
                            
                        

Spring Boot

SpringはJavaアプリのデファクトスタンダード

• アプリケーションのコーディングを容易にするIoC, AOPと抽象化
• 高速かつ軽量、必要に応じて極めて強力に作用
• Spring Bootによるすぐに使える設定
• アプリケーションのライブリロード

                            
@Service
@Transactional
public class UserService {

    @Autowired
    private UserRepository userRepository;

}
                            
                        

Netflix OSS

Netflix OSS - マイクロサービスのための素晴らしいツールとフレームワークを提供

• Eureka - ロードバランシングとフェイルオーバーのためのサービスレジストリ

Liquibase

データベースのアップデートを簡単に

• データベーススキーマの更新を処理
• SpringやJPAとの相性は抜群
• データベースとORMの理解が必要

JPA

Javaの標準的なORMソリューション

• 内部でHibernateを使用
• 非常に完成度の高い見応えのある機能セット
• 初心者にはまだ複雑な内容

                            
@Entity
public class User implements Serializable {

    @Id
    private String login;

}
                            
                        

Spring Data JPA

JPAに特定のシンタックスシュガーを追加

• JPAリポジトリを自動で生成
• 多くのボイラープレート・コードを削除

                            
public interface PersistenceAuditEventRepository extends JpaRepository<PersistentAuditEvent, String> {

    List<PersistentAuditEvent>
        findByPrincipalAndAuditEventDateGreaterThan(String principal, LocalDateTime after);

}
                            
                        

MongoDB

スケーラビリティのためのNoSQL

• SQLデータベースやJPAに代わる選択
• Spring Data MongoDBは、Spring Data JPAと同じようなコードで動作
• よりスケーラブルに、より使いやすく

Couchbase

スケーラビリティのためのNoSQL

• SQLデータベースとJPAに代わる選択
• Spring Data MongoDBは、Spring Data JPAと同じようなコードで動作
• よりスケーラブルに、より使いやすく

Cassandra

スケーラビリティのためのNoSQL

• SQLデータベースとJPAに代わる第二の選択
• リニアなスケーラビリティと高可用性
• ミッションクリティカルなアプリケーションに対し優れたパフォーマンスと低レイテンシーを実現

キャッシュ

キャッシュはパフォーマンスの王様

• Ehcacheは最も広く使われているソリューション
• HazelCastはクラスタリングに対応した優れた代替品
• Hibernateの2ndレベルキャッシュやSpring Cachingの抽象化

                            
@Entity
@Cache(usage = CacheConcurrencyStrategy.NONSTRICT_READ_WRITE)
public class User implements Serializable {

}
                            
                        

Spring Security

防弾仕様のセキュリティフレームワーク

• あらゆる業界で広く使用されているリーディングツール
• URLとJavaコードを保護（Spring Beans）
• ステートフル（Cookie）およびステートレス（OAuth2/JWT）の両方のWebアプリケーション・アーキテクチャで動作

Spring MVC REST

Javaで最高のRESTフレームワーク

• 完全で高性能なRESTソリューション
• 優れたSpringのサポート、テストサポート

                            
@RestController
public class AccountResource {
    @PostMapping("/account")
    public void saveAccount(@RequestBody UserDTO userDTO) {
        userService.updateUserInformation(userDTO);
    }
}
                            
                        

Thymeleaf

サーバーサイドのテンプレート

• Single Web Pageアプリケーションではニーズに合わない場合に使用
• 旧く非推奨のJSPとJSTLを置き換え
• ウェブデザイナーのための優れたテンプレート

                            
Hello, world
                            
                        

モニタリング

Metricsで本番に備える

• JVM, アプリサーバー, Spring Bean, キャッシュなどを監視!
• JMXやGraphiteのレポート

                            
@Timed
public void saveAccount(@RequestBody UserDTO userDTO) {
    userService.updateUserInformation(userDTO);
}
                            
                        

クラウドデプロイメント

クラウドへ、そしてその先へ！

• デプロイはオンプレミスでもクラウドでも簡単であるべき
• CloudFoundry, Heroku, Amazon Web Servicesといった主要なクラウドプロバイダーは、いずれも特定のツールやデプロイオプションを提供

JHipsterの紹介

なぜこのように騒がれるか

大げさすぎ？

本記事執筆時点（2018年3月）でJHipsterは

• 21人のコアメンバーを含む417人のコントリビューター
• 9,891のGitHubスターと2,180のフォーク
• 100万台以上の導入実績
• そしてこれらは急速に成長している

なぜか？

クールな技術は多く現れたが

• WebpackとMavenを親和性高く連携できるか？
• AngularとSpring MVC RESTは？
• Netflix OSSとSpringは？
• セキュリティ、キャッシュ、モニタリングなど、すべてをスムーズに連携させることは明らかに容易ではない

JHipsterは全てを調和

• JHipsterはこれらの技術を駆使して完全に動作するアプリケーションを作成
• すべての機能がすぐに使える
• WebpackのタスクがMavenのゴールとうまく連動
• すべてをスムーズに動かすためのDockerの構成あり

さらに!

• "entity" サブジェネレータが、データベースからAngularまで、完全なJPAエンティティを生成
• "jdl" サブジェネレーターが、JDL Studioを使用して複雑なエンティティモデルを生成
• "service" Springのビジネスサービスを生成するサブジェネレータ
• "languages"サブジェネレーターで国際化対応の言語を追加
• Spring Securityの優れたサポート。Ajaxエンドポイント、セキュアなRemember-me、監査...
• メトリックスによる優れたモニタリング画面

まだ終わらない!

• マイクロサービスやゲートウェイを作成するための優れたサポート
• ConsulまたはJHipster Registry (Netflix Eureka + Spring cloud config server) をすぐに提供可能
• Dockerの優れたサポート
• JHipsterのModules による機能追加

プロダクションレディ

• GZippingとHTTPキャッシングヘッダを持つ特定のSpringプロファイル
• WebpackによるTypeScriptとCSSの最適化と最小化
• 実行可能または標準的なWARファイル、監視も有効化
• CloudFoundry、Heroku、AWSに自動デプロイするためのサブジェネレータ
• "docker-compose" マイクロサービスを本番環境にデプロイするためのDocker設定を生成するサブジェネレータ

最初のアプリを作ろう

10分間のチュートリアル

Yeomanをインストール

                            
npm install -g yo
npm install -g generator-jhipster
                            
                        

アプリケーションを作成する

組み込みの Maven ラッパーを使用して実行
（アプリケーションのホットリロードは自動的に実行）

                            
jhipster
./mvnw
                            
                        

クライアントサイドのライブリロード

WebpackとBrowsersyncによりクライアントサイドのコード（HTML, CSS, TypeScript）のライブリロードが機能。任意のファイルを編集によりブラウザは自動的に更新

                            
npm start
                            
                        

エンティティを追加

                            
jhipster entity Foo
                            
                        

プロダクションでの実行

（Dockerを使ってデータベースを実行）

                            
./mvnw -Pprod package
docker-compose -f src/main/docker/mysql.yml up -d
java -jar target/*.war