Sencha and Spring (Spring 2GX 2013)
3 likes5,539 views
The document presents insights from a presentation on building universal applications using Sencha and Spring frameworks, addressing the challenges developers face in creating applications that work seamlessly across different devices. It emphasizes the seamless integration of Sencha for mobile application development and how Spring's REST capabilities can facilitate this process. Notably, the presentation showcases a Spring-based Twitter search app as a practical example of this integration in action.
Sencha and Spring (Spring 2GX 2013)
- 1. © 2013 SpringOne 2GX. All rights reserved. Do not distribute without permission. Sencha and Spring Lou Crocker, Sencha & John Ferguson, Pivotal
- 2. S P R I N G I O C O R E : Spring Framework 4.0
- 3. Who are these guys?
- 4. John Ferguson • Sr. Field Engineer at Pivotal • Formally Enterprise Data and Application Architect • Financial Services background • <3 Music Theater • Enjoys cats and internet memes
- 5. Lou Crocker • Senior Sales Engineer • Background in Enterprise Development and Professional Services
- 6. What are we doing here? • Sencha, Ext-JS, Touch, GXT….huh? • Isn’t this a Spring conference? • Building a demo live on stage • Building with Sencha Architect • Wait…did we just create an “app”? • That’s child’s play. Show me a real application
- 7. Developers Current problem End Users Consumers are demanding a universal app experience Developers are facing challenges building universal apps • Same app functionality everywhere • Experiences tailored for desktop, mobile and tablet • Apps need to run everywhere • Apps need to be managed on disparate platforms
- 8. Too many application platforms!
- 9. The Sencha Mission Rapid and easy development of rich web apps for the broadest range of access devices from IE6 to the latest table.
- 10. Frameworks Sencha Touch Sencha Ext JS Sencha GXT
- 11. Sencha Ext JS • MVC architecture • Robust data APIs • Modern themes • Rich UI widgets • Plugin-free charting • Big data grids • Cross platform browser compatibility
- 12. Sencha Touch • High performance mobile application framework • Cross platform apps • Themes for each platform • Smooth scrolling and animations • Multi-touch gestures • Adaptive layouts
- 13. • Visual app builder for desktop and mobileGenerate live interfacesBuild UI and code fully featured apps directly in ArchitectConnect to backends easilyBest practices generated code Sencha Architect
- 14. Aren’t we at a Spring conference? The “I Wear Too Many Hats at My Company” Syndrome • Developers have many jobs to do • There isn’t always a “UI” developer • Spring developers are expected to build Mobile Apps • Sencha and Spring seamless integration – logical connectivity
- 15. Can we just agree? • REST is how mobile apps communicate with backends • Lightweight • Easy to use • Facilitates data binding in Sencha Touch
- 16. Quick Hyper Primer How do we build REST in Spring MVC servlet-context.xml <mvc:annotation-driven /> Controller @Controller public class MyController { @RequestMapping(value=“/resource/{id}”, method=RequestMethod.GET) public @RequestBody MyResource getResource(@PathVariable(“id”) int id){ return dataSource.get(id); } }
- 17. How REST-y do we we need to be? * This slide is shamelessly stolen from Josh Long @starbuxman http://martinfowler.com/articles/richardsonMaturityModel.html The Richardson Maturity Model is a way to grade your API according to the REST constraints with 4 levels of increasing compliance
- 18. What do we need? • Need resources so we can map back to UI domain • Need Verbs so we can use GET/POST/ PUT/DELETE consistently • Hypermedia Controls / HATEOAS not important today but Sencha can take advantage of in future
- 19. Wait… Hatie Oh Ah Es? HATEOAS: Hypermedia As The Engine Of Application State • Uniform interface • Rels in Links provide standard access to related resources http://www.youtube.com/watch?v=SC0FPuDKei0 Better explanation:
- 20. Quick Hyper Primer How do we build REST in Spring MVC servlet-context.xml <mvc:annotation-driven /> Controller @Controller public class MyController { @RequestMapping(value=“/resource/{id}”, method=RequestMethod.GET) public @RequestBody MyResource getResource(@PathVariable(“id”) int id){ return dataSource.get(id); } } Level 1: Resources Level 2: HTTP Verbs
- 21. Some things to think about… • Models Matter – Mobile clients need to know how the objects are returned • REST consistency matters – Can’t change the URL’s willy-nilly • Thinner objects are better than monothlic – Many times you are sending data over mobile network • JSONP is your friend for development
- 22. D E M O
- 23. Spring Twitter Search • Spring REST back end • Query will return last 10 tweets to match • Wrap it in JSONP to enable cross-site json • Sencha Touch front-end • What is this Spring 2012? A twitter app? You bet!
- 24. Building a Spring Twitter backend
- 25. Or do they….
- 26. Add a little Spring Social
- 27. ..and we have data!
- 28. Building a Twitter search app • Let’s begin with Architect • The project structure • Add the container • Add the view • Create the Model • Create the store • Bind the view
- 29. Access static electricity resource in Spring
- 30. Combine the pieces … and deploy! • Test the data in the design environment • Create the display template • Create the preview path • Preview the app • Set the build path • Build the app • Modify template/theme/parameters and repeat
- 31. Let’s start trending! http://ssawesome123.cfapps.io/app.html Tweet with hashtag: #ssawesome
- 32. Spring Trader • Reference Architecture for Pivotal and Spring • Inspired by IBM “Day Trader” • Uses Spring MVC to expose REST endpoints – Level 2: HTTP verbs • Sencha Touch front end http://springtrader.gopivotal.com/spring-nanotrader-sencha/ https://github.com/vFabric/springtrader/tree/sencha-mobile Github: Live Application:
- 36. Keeping up with us John Ferguson Email: jferguson@gopivotal.com twitter: fergusonjohnw Lou Crocker Email: lou@sencha.com web: www.sencha.com