Cloud development technology sharing (BlueMix premier), including Node.js / Orion / AngularJS /NoSQL

1. IBM軟體研發技術主題分享
-DevOps
-GreenHat
-Mobility
-Cloud Development Tech.
-BlueMix
TommyWu，Senior Technical Consultant
IBM Rational
tommywu@tw.ibm.com

2. Cloud Development Technology Sharing
© 2013 IBM Corporation

3. Agenda
 Cloud Development with JazzHub (Orion)
 Node.JS Development
 Development with NOSQL Document Database :MongoDB
 Frond-End Development Framework with AngularJS
3

4. Cloud Development at JazzHub
 IBM Teams are moving their traditional desktop applications to the Cloud
 Collaborative Lifecycle Management (CLM) development tools from Jazz
already have a web presence
 Can we push that to include development?
4

5. Why web based IDE?
 It’s always there, it’s anywhere
 No setup
 Developers like portable efficient tools like the Swiss army knife
 Take your personalized settings with you
 Easy mesh-ups
 Collaboration
 Shared coding
 Shared debugging
 Shared code reviews
5

6. Development tools are changing as well
Emacs
Eclipse
IntelliJ
Visual Studio
Web based IDE
Orion
Cloud9

7. What is JazzHub?
 JazzHub allows you to develop and collaborate on software projects in
the cloud.
 Fully hosted task tracking, agile planning, and integrated source control
so you have everything you need to develop your next app, feature or
product.
 IBM’s premiere hosted environment for Cloud application development,
with built-in DevOps capabilities
 Explore and join existing projects
7

8. What is Orion?
 Eclipse “platform” project initiated 3 years ago -- Tools for the web, on
the web
 An evolution in tooling leveraging the impressive recent improvements in
browser capabilities and availability of cloud services
 Embracing the shift to web-based application delivery and enabling cross
site collaboration of “pluggable” services
 A community that benefits from compatibility between a common set of
components and services to create richer cloud based tools than they
might otherwise by themselves
8

9. Orion Key Features
 Replaces need for a desktop IDE
9
– Initially targeting needs of web developers (HTML, JavaScript, CSS, Ruby, Python)
 Enable “Core” Coding Activities in a Browser
– Code editing, navigating source, search, integration with Source Control Management
 Speed / Responsive UI Design
 Extensibility and Community are what sets Orion apart

10. Orion Technical Functions
 Eclipse Orion is an online integrated development environment that was
created with the goal of providing similar functionality to the Eclipse desktop IDE,
except it runs inside the browser.
 Orion consists of a server that is written in Java™, which you connect to
through the browsers.
 The browser app consists of a large amount of JavaScript code, including
several open-source libraries, to provide for a nice IDE experience.
 The text editor lets you edit any text file, and it includes syntax highlighting for
several languages such as JavaScript, Cascading Style Sheets (CSS), and HTML.
 You can build projects from scratch or use any of the pre-supplied starter
templates.
 The editor is also fully extensible, including a full REST-based interface,
whereby you can create extensions that include both server-side Java code and
client-side JavaScript code.
10

11. How is Orion extensible in the browser?
 “plugins” live right in the page
 Agnostic to where the plugin or code came from
11
Plug-in
Plug-in
Web
Server
Web
Server
Web
Server
Web Client

12. Example of a JSBeautify (JavaScript “pretty print”) plugin
You provide HTML, Javascript elements, from your own web site
12

13. Mobile Support
 Tablets such as the iPad, iPad mini and Android based platforms are
fully supported by Orion
 Add a bluetooth keyboard for a mini workstation
13

14. Two sources of an Orion Server
 Multi-user Equinox based Java Server
 Great for reusing existing Eclipse plug-ins and exposing them REST-fully
to an Orion client
 Node.js based single user NPM install
 Very portable and great performance
 Deploy anywhere Node is installed
14
Also works on
embedded
boards like the
Raspberry Pi

15. What about the Community?
 VMWare JavaScript tooling editor named “Scripted”
 Cloudfier.com creating Cloud based domain solutions
 Firefox embeds Orion for the Scratchpad and Debug tools
 e(fx)clipse leveraging JavaFX, OSGi, Eclipse and Orion
 Maqetta leverages the Orion core and file system
15

16. So we’ve got a browser-based IDE, now what?
 Seems a little silly to run a Web server on my desktop to edit files
 Wouldn’t it be ideal if there was a Cloud for Development where I could
use Orion?
– Software Configuration
– Continuous Integration and Deployment
– Tracking and Planning
– Integration with Cloud runtimes…
 Introducing JazzHub for everyone
– Expanding our Academic experiment from 2011 to welcome all public and private projects
16

17. Introducing JazzHub
 What is JazzHub?
– JazzHub allows you to develop and collaborate on software
projects in the cloud.
– Fully hosted task tracking, agile planning, and integrated source
control so you have everything you need to develop your next app,
feature or product.
– IBM’s premiere hosted environment for Cloud application
development, with built-in DevOps capabilities
– Free public and fee-based private projects (free during Beta)
– Explore and join existing projects
 Start quickly. Simply.
– No downloads required!
– Create your first project in minutes
 Work the way you want to work
– Browser-based development using integrated Eclipse Orion
technology provided by JazzHub
– Full support for local development with Eclipse or Visual Studio
– Built in support for Jazz Source Control
– Connect to your existing GitHub projects

18. Developing in the Cloud, for the Cloud
 So now I can edit my code in the Cloud, in the context of a hosted RTC
project
– Wouldn’t it be cool if I could deploy my code right from there to a Cloud runtime?!?!?
18

19. Agenda
 Cloud Development with JazzHub (Orion)
 Node.JS Development
 Development with NOSQL Document Database :MongoDB
 Frond-End Development Framework with AngularJS
19

20. What is NodeJS?
 A JavaScript runtime environment running Google Chrome’s V8 engine
– a.k.a. a server-side solution for JS
– Compiles JS, making it really fast
 Runs over the command line
 Designed for high concurrency
– Without threads or new processes
 Never blocks, not even for I/O
 Uses the CommonJS framework
– Making it a little closer to a real OO language
http://nodejs.org/
Node.js® is a platform built on Chrome's JavaScript
runtime for easily building fast, scalable network
applications. Node.js uses an event-driven, non-blocking
I/O model that makes it lightweight and
efficient, perfect for data-intensive real-time applications
that run across distributed devices.

21. Event Driven ,Non-Blocking I/O , CallBack Sample
21
var console.fs = require(‘log('Start');
fs’);
fs.setTimeout(readFile(‘/function() path’, function { (err, console.file) { log('console.Trigger'); log(‘讀}, 取0);
文件完成’) });
console.log(‘log('開End');
始讀取文件');
Node.js是單執行緒的。它透過事件輪詢（event loop）
來實現並行操作，對此，我們應該要充分利用這一點—
— 盡可能的避免Blocking操作，取而代之，多使用Non-
Blocking操作。
var http = require('http');
var s = http.createServer(function (req, res) {
console.log("Request received.");
res.writeHead(200, {'content-type': 'text/plain' });
res.end('hello worldn');
}
);
s.listen(8080);
console.log("Server has started.");
我們給某個方法傳遞了一個函數，這個方法在有相應事
件發生時執行這個函數來進行回呼(callback)

22. Non Blocking I/O Example

23. 可擴充性模組化(HTTP/FTP/Socket/DB/Template/I/O/Network…
23

24. 外掛示意圖
24

25. Agenda
 Cloud Development with JazzHub (Orion)
 Node.JS Development
 Development with NOSQL Document Database :MongoDB
 Frond-End Development Framework with AngularJS
25

26. 26

27. NoSQL in data management and processing

28. NOSQL - Not Only SQL (Non-Rational)
一致性
Consistency
擴展性
Partition
tolerance
可用性、低延遲
Availability
Low Latency
NOSQL
NOSQL
RDBMS
?
http://zh.wikipedia.org/wiki/NoSQL

29. NoSQL Database Types – Common Vendors
Key-Value Document
BigTable Graph

30. NoSQL 定義
From www.nosql-database.org:
Next Generation Databases mostly addressing some of the
points: being non-relational, distributed, open-source and
horizontal scalable. The original intention has been modern
web-scale databases. The movement began early 2009 and is
growing rapidly.
Often more characteristics apply as: schema-free, easy
replication support, simple API, eventually consistent / BASE
(not ACID), a huge data amount, and more.
如Google BigTable、Amazon S3的Dynamo資料
庫，或是微軟Azure
19 September 2014 30

31. + NoSQL Distinguishing Characteristics
Large data volumes
–Google’s “big data”
Scalable replication
and distribution
–Potentially thousands of
machines
–Potentially distributed
around the world
Queries need to return
answers quickly
Mostly query, few
updates
Asynchronous
Inserts & Updates
Schema-less
ACID transaction
properties are not
needed – BASE
Open source
development
19 September 2014

32. Why NoSQL
• Handles Schema
Changes Well (easy
development)
• Volume Data
manipulation
• Rise of JSON
• python module:
simplejson

33. 33
Mongo DB
MongoDB (from “ humongous “) is a scalable, high-performance,
open source, document-oriented database.
Written in C++.
Home: http://www.mongodb.org/
Support by http://www.10gen.com/
Production Deploy
http://www.mongodb.org/display/DOCS/Production+Depl
oyments

34. MongoDB 應用
 MongoDB 是10gen 這家公司開發的一個NoSQL Database，屬於
Document-Oriented Database 這一類型，希望能夠結合Relational
Database 與Key/Value Database 雙方的優點，很適合用在Web 應用程
式、Internet 架構的環境底下
34
看起來就跟JSON 一樣。_id 欄位就是Primary Key，其他都是一般的欄位

35. 35
Developing with MongoDB
 MongoDB Shell : MongoDB comes with a JavaScript shell that allows
interaction with a MongoDB instancefrom the command line.
 插入新增資料（Insert）
– # 插入一筆新資料到users Collection （相當於傳統SQL 裡的Table 角色） db.users.insert({ username: "fred",
password: "12345678" }) # 含當前時間db.users.insert({ username: "fred", password: "12345678", created:
new Timestamp() })
 查詢（Query）：
– # 查詢所有username 為fred 的資料:db.users.find({ username: "fred" })
– # 查詢單筆: db.users.find_one({ username: "fred" })
 修改更新資料（Update）：
– # 更新username 為fred 的password 欄位: db.users.update({ username: "fred" }, { $set: { password:
"87654321" }})
– # 完全取代username 為fred 的資料（username 和password 欄位會因此不見，只剩下email 欄位）
db.users.update({ username: "fred" }, { email: "cfsghost@gmail.com"})
 刪除資料（Delete）：
– db.users.remove({ username: "fred" })

36. In Production
http://36
www.mongodb.org/about/production-deployments/

37. Document store vs. RDBMS
37
RDBMS MongoDB
Database Database
Table, View Collection
Row Document (JSON, BSON)
Column Field
Index Index
Join Embedded Document
Foreign Key Reference
Partition Shard

38. Cloudant NoSQL DBaaS
App Layer / Browser / Mobile App
REST (HTTPS)
Multi-
Master
Replication
Indexed
JSON
Storage
Cloudant JSON API
Lucene
Search
2D, 3D
Geospatial
Geo-Load Balancing
JSON
CRUD
Device
Sync
Incremental
MapReduce
Security Monitoring
IO
Control
Physical Storage @ IBM SoftLayer, Rackspace, Microsoft Azure, AWS

39. Cloudant Features
39
Document-Oriented
storege
Full Index Support
Replication & High
Availability
Auto-Sharding
Querying
Fast In-Place Updates
Map/Reduce
Agile
Scalable

40. Agenda
 Cloud Development with JazzHub (Orion)
 Node.JS Development
 Development with NOSQL Document Database :MongoDB
 Frond-End Development Framework with AngularJS
40

41. What is AngularJS?
 A JavaScript framework for creating dynamic web applications
 AngularJS 的框架屬於MVC 設計模式，也將控制器(Controller) 與檢
視(Views) 間切割的非常乾淨，Controller 和View 之間式各司其職
 AngularJS 的優點為宣告式語法(Directives)、雙向資料繫結(Two Way
Data-Binding)、相依性注入(Dependency Injection) 以及關注點分離等特
性
 直接拿HTML (DOM) 當成Template 來使用，變成可reuse的元件
 資料binding在{{ }} 裡面
 最適合用在CRUD類型的網站專案
 若網站需要大量的DOM操作則不適合

42. AngularJS的特性
雙向綁定
模版
MVC
服務
指令
篩檢程式
關注點分離
運算式
路由
NG動畫

43. MVC
 Model
– The data
 Controller
– The behavior
– Modifying / updating the models
 View
– The interface
– How the data is presented to the user
JavaScript
HTML

44. AngularJS 應用範例
44

45. Data Binding
 Views are declarative
– The structure of the interface
 Controllers do not need to directly manipulate the view
– Changes in the models / data are automatically reflected in the view
– Updates are managed by the frameworks
簡單來說我們利用AngularJS 來定義一個Model
物件，而當物件值有改變時也會連動影響其他有
用到這個物件的項目的值。我們只要負責定義，
並且決定要在哪邊顯示這個Model 的值，其他的
事情就交由AngularJS 來為我們處理，我們根本
不用再寫類似這樣的程式碼：
$("#demo1").val($("#value").val())

46. Views
 Make use of special ng attributes (directives) on the HTML
elements
–ng-app
Determines which part of the page will use AngularJS
If given a value it will load that application module
–ng-controller
Determines which Javascript Controller should be used for that part of the page
–ng-model
Determines what model the value of an input field will be bound to
Used for two-way binding

47. Controller
 Function that takes at least one parameter: $scope
–Function is a constructor
–Ex: function MyCtrl($scope) { … }
 $scope
–JavaScript object
–Contains data (i.e. models) and methods (i.e. functions)
–Can add own properties
$scope.<my new property> = <value>;