2013 java2 days web apps - a different angle

Web apps: a different angle

Spring {data,data-rest} with

Angular.js and Bootstrap

Ioan Eugen Stan

About me - Ioan Eugen Stan

● founder & organizer of Bucharest JUG http://bjug.ro/● Apache comitter and PMC - Apache James & Apache

Provisionr (Incubator)● Debian user and contributor - maintainer wanabee● OpenJDK supporter

Why this talk?

Today’s web app needs to

● respond fast to user needs (easy to extend)

● share data with others (mash-up)

● be mobile (friendly)

● scale well

What are we building?REST services with Database persistance

and Angular JS client

Spring Data

● Spring umbrella project

● simplifies data access

● CRUD on steroids

● Declarative query methods○ magic finders

● single API for different technologies

Overview

http://www.infoq.com/articles/spring-data-intro

The “magic”

http://bearprogrammer.com/2012/03/26/simple-spring-data-example/

Magic Finder keywords

How to use Spring Data

Spring Data Rest

● expose Repositories as REST endpoints

● uses SpringMVC

● Servlet based

● provides HATEOS

HATEOAS

http://azagorneanu.blogspot.ro/2013/06/hateoas-using-spring-framework.html

Spring Rest Shell

● command line REST tool

● explore and test HATEOS services

● demo

Webjars

● Explicitly and easily manage the client-side

dependencies in JVM-based web apps

● Use JVM-based build tools (e.g. Maven,

Gradle, & SBT)

● Transitive dependencies magically appear

Bootstrap

Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web

development.

Build good looking responsive web apps fast

JavaScript library for web apps

● very clean MVC implementation

● clean data binding

● declarative UI (HTML)

● model is POJO

● encourages modularity and unit testing

How it works

http://devgirl.org/2013/03/21/fun-with-angularjs/

Jasmine Maven Plugin

Maven plugin for the JavaScript testing framework, Jasmine

● practice TDD/BDD as you write JavaScript● run frontend tests at the same time with

back-end

Resources

● app code here: https://github.com/ieugen/angular-ui ● https://github.com/spring-projects/rest-shell● http://projects.spring.io/spring-data/● http://projects.spring.io/spring-data-rest/● http://angularjs.org/● http://getbootstrap.com/● http://www.webjars.org/● http://www.slideshare.net/KubaKubryski/spring-data-

24027228

[email protected]

[email protected]@ieugen222

ro.linkedin.com/in/ieugen/https://github.com/ieugen/