IBM軟體研發技術主題分享
-DevOps -GreenHat -Mobility -Cloud Development Tech. -BlueMix
TommyWu, Senior Technical Consultant
IBM Rational
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: "[email protected]"})
刪除資料( 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>;