IBM軟體研發技術主題分享

-DevOps -GreenHat -Mobility -Cloud Development Tech. -BlueMix

TommyWu， Senior Technical Consultant

IBM Rational

tommywu@tw.ibm.com

Cloud Development Technology Sharing

© 2013 IBM Corporation

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?

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

Development tools are changing as well

Emacs

Eclipse

IntelliJ

Visual Studio

Web based IDEOrion

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

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

9

Orion Key Features

Replaces need for a desktop IDE

–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

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

Plug-inPlug-in

Plug-inPlug-in

Web ServerWeb

ServerWeb

ServerWeb

ServerWeb

ServerWeb

Server

Web ClientWeb Client

12

Example of a JSBeautify (JavaScript “pretty print”) plugin

You provide HTML, Javascript elements, from your own web site

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

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

Also works on embedded

boards like the Raspberry Pi

YouTube demo

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

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

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

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

Agenda

Cloud Development with JazzHub (Orion)

Node.JS Development 

Development with NOSQL Document Database :MongoDB 

Frond-End Development Framework with AngularJS 

19

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

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.

http://nodejs.org/

Event Driven ,Non-Blocking I/O , CallBack Sample

21

console.log('Start'); setTimeout(function() { console.log('Trigger'); }, 0);console.log('End');

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 world\n'); });s.listen(8080);console.log("Server has started.");

我們給某個方法傳遞了一個函數，這個方法在有相應事件發生時執行這個函數來進行 回呼 (callback) 

Node.js是單執行緒的。它透過事件輪詢（ event loop）來實現並行操作，對此，我們應該要充分利用這一點 —— 盡可能的避免 Blocking操作，取而代之，多使用 Non-Blocking操作。

var fs = require(‘fs’); fs.readFile(‘/path’, function (err, file) { console.log(‘讀取文件完成’ ) }); console.log(‘開始讀取文件 ');

Non Blocking I/O Example

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

23

外掛示意圖

24

Agenda

Cloud Development with JazzHub (Orion)

Node.JS Development 

Development with NOSQL Document Database :MongoDB 

Frond-End Development Framework with AngularJS 

25

26

NoSQL in data management and processing

NOSQL - Not Only SQL (Non-Rational)

一致性Consistency

擴展性Partitiontolerance

可用性、低延遲AvailabilityLow Latency

NOSQL

NOSQL

RDBMS

?

http://zh.wikipedia.org/wiki/NoSQL

Key-Value Document

BigTable Graph

NoSQL Database Types – Common Vendors

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.

April 10, 202330

如 Google BigTable、 Amazon S3的 Dynamo資料庫，或是微軟 Azure

+ 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-lessACID transaction properties are not needed – BASE

Open source development

April 10, 2023

Why NoSQL

• Handles Schema Changes Well (easy development)

• Volume Data manipulation

• Rise of JSON• python module:

simplejson

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+Deployments

MongoDB 應用

MongoDB 是  10gen 這家公司開發的一個  NoSQL Database，屬於 Document-Oriented Database 這一類型，希望能夠結合  Relational Database 與  Key/Value Database 雙方的優點，很適合用在 Web 應用程式、 Internet 架構的環境底下

34

看起來就跟 JSON 一樣。 _id  欄位就是 Primary Key ，其他都是一般的欄位

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://www.mongodb.org/about/production-deployments/

37

Document store vs. RDBMS

RDBMS MongoDB

Database Database

Table, View Collection

Row Document (JSON, BSON)

Column Field

Index Index

Join Embedded Document

Foreign Key Reference

Partition Shard

Cloudant NoSQL DBaaS

Indexed JSON Storage

Geo-Load BalancingGeo-Load Balancing

App Layer / Browser / Mobile AppApp Layer / Browser / Mobile App

REST (HTTPS)

Physical Storage @ IBM SoftLayer, Rackspace, Microsoft Azure, AWS

Cloudant JSON API

JSON CRUDJSON CRUD

Multi-Master ReplicationMulti-Master Replication

Device SyncDevice Sync

Lucene SearchLucene Search

2D, 3D Geospatial2D, 3D Geospatial

Incremental MapReduceIncremental MapReduce Monitoring Monitoring SecuritySecurity IO

Control

IO Control

39

Cloudant Features

Document-Oriented storege

Full Index Support

Replication & High Availability

Auto-Sharding

Querying

Fast In-Place Updates

Map/Reduce

Agile

Scalable

Agenda

Cloud Development with JazzHub (Orion)

Node.JS Development 

Development with NOSQL Document Database :MongoDB 

Frond-End Development Framework with AngularJS 

40

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 操作則不適合

AngularJS的特性

雙向綁定

模版

MVC

服務指令

篩檢程式

關注點分離

運算式路由

NG動畫

MVC Model

–The data

Controller

–The behavior

–Modifying / updating the models

View

–The interface

–How the data is presented to the user

JavaScript

HTML

AngularJS 應用範例

44

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())

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

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>;