1. Last Updated: April. 2014
VP
Delivery
Smaisa
Abeysinghe
Rapid
Applica3on
Development
with
JavaScript
and
Data
Services

2. 2
About
the
Presenter
๏ Samisa
Abeysinghe
VP
Delivery
samisa@wso2.com
๏ Samisa
Abeysinghe,
Vice
President
of
Delivery
joined
the
company
in
September
2005.
Prior
to
the
current
role,
Samisa
used
to
be
VP
of
Engineering
and
managed
the
development
of
WSO2
Carbon
based
product
plaJorm.

3. 3
About
WSO2
๏ Global
enterprise,
founded
in
2005
by
acknowledged
leaders
in
XML,
web
services
technologies,
standards
and
open
source
๏ Provides
only
open
source
plaJorm-­‐as-­‐a-­‐service
for
private,
public
and
hybrid
cloud
deployments
๏ All
WSO2
products
are
100%
open
source
and
released
under
the
Apache
License
Version
2.0.
๏ Is
an
Ac3ve
Member
of
OASIS,
Cloud
Security
Alliance,
OSGi
Alliance,
AMQP
Working
Group,
OpenID
Founda3on
and
W3C.
๏ Driven
by
Innova3on
๏ Launched
first
open
source
API
Management
solu3on
in
2012
๏ Launched
App
Factory
in
2Q
2013
๏ Launched
Enterprise
Store
and
first
open
source
Mobile
solu3on
in
4Q
2013

4. 4
What
WSO2
delivers

5. 5
Business
Model

6. Rapid
Applica3on
Development:
Challenges
๏ The
problem:
๏ Bringing
data
to
Screen
๏ Dimensions
๏ Time
๏ How
fast
we
can
get
into
produc3on?
๏ Requirements
๏ Ever
changing
–
need
for
agile
prac3ces
๏ Technology
๏ Programming
languages
๏ Frameworks
and
tools
Time
Requirements
Technology
6

7. JavaScript
Applica3ons

8. JavaScript
for
Applica3on
Development
๏ Easy
to
use
๏ Many
developers
๏ Quick
to
develop
and
test
๏ All
aspects
of
an
applica3on
addressed
๏ Backend
services
(REST,
JSON)
๏ Fronted
UI
(Combines
with
HTML)
๏ Data
driven
8

9. {Jaggery.js}
“The
delicious
javascript
framework”
hhp://jaggeryjs.org

10. Why
another
server-­‐side
JS
toolkit
q Wri3ng
a
web
app
we
need
to
walk
through
mul3ple
layers
of
technology
§ HTML(5)/JS,
PHP/Ruby/Java,
ORM(SQL)
q Informa3on
captured
at
the
client
need
to
be
transformed
at
each
layer
§ JSON/CSV/XML
q Its
not
straighJorward
to
build
a
na3vely
REST/JSON
app
q Developing
an
API
coupled
to
the
app
is
a
nightmare

11. Jaggery.js
for
Mul3-­‐Tier
Web
Applica3on
Development
q A
vanilla
plaJorm
q No
heavy
frameworks
q No
restric3ons
q Only
a
set
of
APIs
q Smooth
&
easy
deployment
q Enterprise
grade
run3me

12. What
Jaggery.js
contains?
q A
module
architecture
q The
run3me
augments
the
features
of
a
Web
server
q It
talks
smoothly
in
JSON
q Can
handle
URL
paherns
q Can
talk
to
databases
q A
Shell
that
can
execute
the
jaggery
scripts
and
a
Try-­‐It
tool
q Its
a
new
plaJorm
for
building
cool
apps

13. How
to
get
started?
q Extract
jaggery-[version].zip
to
a
directory
you
prefer.
lets
call
it
JAGGERY_HOME
q Navigate
to
{JAGGERY_HOME}/bin directory
which
contains
all
the
Jaggery
execu3on
scripts.
q Run
sh {JAGGERY_HOME}/bin/server.sh
({JAGGERY_HOME}/
bin/server.bat in
windows)
command
to
start
the
server

14. "Hello
World"
in
Jaggery.js
q Create
a
directory
called
helloapp
at
{JAGGERY_HOME}/apps/
q Create
a
jaggery
file
helloworld.jag
inside
the
helloapp
directory
and
add
the
following
code
snippet
q Thats
it!
now
point
to
{http://localhost:9443/helloapp/
helloworld.jag}

15. The
API
๏ http://jaggeryjs.org/documentation.jag

16. “Try
it”
Tool

17. The
Extensibility
q Jaggery
can
be
extended
using
modules
q You
can
import
any
script
which
is
wrihen
for
commonjs
as
a
jaggery
module
q If
nothing
for
the
rescue,
you
can
expose
even
a
JAVA
library
as
a
module
for
Jaggery

18. Just
JavaScript
&
JSON
end
to
end
q If
you
simply
want
to
send
some
JSON
to
the
client

19. It's
built
to
write
REST
Apps
q Match
URLs
at
run3me
q Design
URLs
at
development
3me

20. It's
Modular
q Its
extensible
via
modules
q Even
the
core
is
wrihen
in
modules
and
bound
with
configura3on

21. Sample
JavaScript
Applica3on

22. REST:
URL
Mapping
var
uriMatcher
=
new
URIMatcher(callPath);
if
(uriMatcher.match("/{orderid}/"))
{
orderid
=
uriMatcher.elements().orderid;
}

23. REST:
HTTP
Verb
Mapping
If
(verb
==
"DELETE"
&&
orderid
!=
null)
{
deleteOrder(orderid);
}
else
if
(verb
==
"GET"
&&
orderid
!=
null
&&
addi3on
==
null
&&
status
==
null)
{
viewOrder(orderid);
}
else
if
(verb
==
"PUT"
&&
orderid
!=
null
&&
addi3on
!=
null)
{
addAddi3on(orderid,
addi3on);
}

24. Data
Driven
Apps
var
db
=
new
Database("jdbc:h2:tmp/demo",
"admin",
”admin");
db.query("INSERT
INTO
demo
VALUES('WSO2','59
Flower
Rd'),
('WSO2
UK',
'Emsworth,
Hampshire,
UK');");
var
result
=
db.query("SELECT
*
FROM
demo");
print(result);

25. q It's
completely
open-­‐source,
under
Apache
2.0
q Mail
us
at
dev@wso2.com
q Report
your
issues
at
https://wso2.org/jira/browse/JAGGERY
q The
source
is
at
(which
will
be
soon
moved
to
GitHub)
http://svn.wso2.org/repos/wso2/carbon/platform/trunk/
products/jaggery/

26. “Applica3on
Server”
support
for
JavaScript

27. Java
WebApp
like
Support
for
Jaggery.js
q With
WSO2
Applica3on
Server
q Manage
Apps
q Life-­‐cycle
management:
Upload,
ac3vate,
deac3vate,
re3re
q Monitor
status
q Sta3s3cs,
health
etc.

28. JavaScript
Apps
with
WSO2
Applica3on
Server

29. Dashboards
and
Sites
with
JavaScript

30. WSO2
User
Engagement
Server

32. Data
Services

33. 33
Data
Services
๏ Quick
technique
to
expose
databases
as
services
๏ Wrihen
using
XML
descriptor

34. 34
Data
Services

35. 35
Data
Services
–
Structure
Define
database
configura3ons
Define
queries
Map
queries
to
opera3ons

36. 36
Data
Services:
DB
Configura3ons
<config
id="default">
<property
name="org.wso2.ws.dataservice.driver">org.h2.Driver</property>
<property
name="org.wso2.ws.dataservice.protocol">jdbc:h2:file:./samples/database/DATA_SERV_SAMP</property>
<property
name="org.wso2.ws.dataservice.user">wso2ds</property>
<property
name="org.wso2.ws.dataservice.password">wso2ds</property>
<property
name="org.wso2.ws.dataservice.minpoolsize">1</property>
<property
name="org.wso2.ws.dataservice.maxpoolsize">10</property>
<property
name="org.wso2.ws.dataservice.autocommit">false</property>
<property
name="org.wso2.ws.dataservice.valida3on_query"/>
</config>

37. 37
Data
Services:
Query
<query
id="customersInBostonSQL"
useConfig="default">
<sql>select
*
from
Customers
where
city
=
'Boston'
and
country
=
'USA'</sql>
<result
element="customers"
rowName="customer">
<element
column="customerName"
name="customer-­‐name"
xsdType="string"/>
<element
column="contactLastName"
name="contact-­‐last-­‐name"
xsdType="string"/>
<element
column="contactFirstName"
name="contact-­‐first-­‐name"
xsdType="string"/>
<element
column="phone"
name="phone"
xsdType="string"/>
<element
column="city"
name="city"
xsdType="string"/>
<element
column="country"
name="country"
xsdType="string"/>
</result>
</query>

38. 38
Data
Services:
Opera3on
<opera3on
name="customersInBoston">
<call-­‐query
href="customersInBostonSQL"/>
</opera3on>

39. 39
Data
Services:
REST
-­‐
GET
<resource
method="GET"
path="product/{productCode}">
<call-­‐query
href="getProductByCodeQuery">
<with-­‐param
name="productCode"
query-­‐param="productCode"/>
</call-­‐query>
</resource>

40. 40
Data
Services:
REST
-­‐
POST
<resource
method="POST"
path="product">
<call-­‐query
href="createProductQuery">
<with-­‐param
name="productCode"
query-­‐param="productCode"/>
<with-­‐param
name="productName"
query-­‐param="productName"/>
<with-­‐param
name="productLine"
query-­‐param="productLine"/>
<with-­‐param
name="quan3tyInStock"
query-­‐param="quan3tyInStock"/>
<with-­‐param
name="buyPrice"
query-­‐param="buyPrice"/>
</call-­‐query>
</resource>

41. 41
More
Informa3on
!
๏ Jaggery.js
hhp://jaggeryjs.org
๏ WSO2
Applica3on
Server
for
managing
JavaScript
Apps
and
Data
Services:
hhp://wso2.com/products/applica3on-­‐server/
๏ WSO2
User
Engagement
Server
for
building
dashboards
and
visualiza3ons:
hhp://wso2.com/products/user-­‐engagement-­‐server/

42. Contact
us
!