JavaScript Everywhere: Backend to Web and to Mobile Apps

Ruchira Wageesha & Madhuka Udantha

WSO2 Inc.

Path

• Why JavaScript• We will mainly discuss about

JaggeryJS • Jaggery APIs• Start with a high level discussion • Then Hands On

Reaching Out the Last Mile

• Users no longer accept average user experience

• Users Interfaces (UIs) covers the last mile

• Often decides the success and how much it will integrate with the user’s lives.

JavaScript

Evolution of Web Applications

Evolution of Web Applications

Web Apps

•Mobiles

•Internet /networks

•Desktops/PC

•Portal Devices

•Tabs/Tablets

Types of Web Application

• Client side (Static HTML)• Client driven, blocking (old Forms based submit )• Client driven, non blocking (AJAX)• Client and server driven, non-blocking (web sockets)

User Interface

Usability

Revolution of UI in Web Apps

• Javascript has become the defacto technology• Variuos Javascript libaries• Supported by all browsers• Thanks goe to

•Web 2.0•HTML5

• No longer simplistic applications• Widely used

Javascript end to end?

Javascript end to end? (Contd.)

● No complexities in data binding (UI to Business logic thanks to JSON)

● No serialization / de-serialization● Rich space with many common javascript libraries● Rapid application development● Resourcful● No compiling, making & building

What my options

• NodeJS - o Based on Google V8 JS engineo Event driven, non-blocking processing

• Jaggery o Provided traditional development experience like in

PHP/JSP o De-facto framework for all WSO2 user facing applications

https://github.com/wso2/jaggery

Introduction to Jaggery

• Like JSP/ PHP, but user writes code completely in javascript (Data access / Business Logic / UI)

• Runs as a Web app (e.g. tomcat)• Runs on top of Java • Provides very close integration with WSO2 Products (e.g.

Users, Web service calls, access to the registry, access OSGI services etc. )

First Look {jaggery.js}

Nothing complexIf (you are familiar with WSO2){server runtimes, it’s the same thing}

Else {extract the zip, run sh /bin/server.sh/.bat

}http://dist.wso2.org/snapshots/maven2/org/jaggeryjs/jaggery/0.9.0-SNAPSHOT/jaggery-0.9.0-20140321.143805-240.zip

Hello Jaggery!!

• Most straight forward Sample• Open up a text editor• Create {JAGGERY_HOME}/apps/carshop/hello.jag

• Browser to :http://localhost:9763/carshop/hello.jag

Out Put

Syntax

Data Storage

• Create a DB connection (DB config)• Perform CRUD operations• Results sent as json

Using Databases and Registry

• <jaggery-home>\carbon\repository\components\lib• Drivers for DB• MetadataStore

collection Resource

Process APIs

• Server details

RESTful Service

URIMatcher

"urlMappings": [{ "url": "/sample/uri-mapping", "path": "/index.jag“ }]

RESTful Service (application.serve())

RESTful Service - router

https://github.com/splinter/jaggery-pipe

Demo

• Use-case?

Demo

Demo

REST service call

Calling out a SOAP Service

Demo

SOAP service invoke

HTML5 and WebSockets

Demo

Web Socket

Including 3rd party js libraries

• {{ mustache }}• Handlebars.js• base64 js

Java and Jaggery

• Writing HostObject for Jaggery• Java Class accessing

http://madhukaudantha.blogspot.com/2014/02/writing-hostobject-for-jaggery.html

Configuration

Configuration (Cont.)

Visualization

WSO2 and Jaggery

WSO2 and Jaggery

Develop RESTful Service & Routering

• URL MappingUsing inbuilt jaggery.conf

• Front End Controller ConceptApplication.serve()var pipe=require('pipe');var router=require('router');pipe.plug(router);

Presentation

https://github.com/wso2/caramel

If not test?

https://github.com/Madhuka/jaggery-test-framewrok

Some utilities• Carbon module• File API• Email API• Feed API• oauth• uuid

https://github.com/wso2/jaggery-extensions

Summary

• Why js• Jaggery.js• Jaggery API• Router• Jaggery-test• Finally….

References

• jaggeryjs.org• wso2.com• https://github.com/wso2/caramel• https://github.com/splinter/jaggery-pipe• https://github.com/Madhuka/jaggery-test-framewrok• http://ruchirawageesha.blogspot.com/• http://madhukaudantha.blogspot.com/

QA

Thank you