Samurai: Bring web standards to native platform

Samurai-Native enables you to build native apps using web technologies based on its own Web-Core.
Support iOS now, Android later.

Native Components

You can use the native components such as UICollectionView and UICollectionViewCell on iOS. This gives your app a consistent look and feel with the rest of the platform ecosystem, and keeps the quality bar high. These components are easily incorporated into your app using <UICollectionView/> and <UICollectionViewCell/> directly.

 <html> <body> <UICollectionView class="list" is-vertical> <UICollectionViewCell is-static is-row> ... </UICollectionViewCell> </UICollectionView> </body> </html>

HTML Components

You can use the standard HTML tags such as div and img on iOS. This gives you ability to define your user interface using a hybrid way.

 <html> <body> <UICollectionViewCell is-static is-row> <div class="profile-wrapper"> <div class="profile-attribution"> <div class="profile-segment no-wrap"> <div class="segment-wrapper"> <span class="segment-count">10,875</span> <span class="segment-suffix">Followers</span> </div> </div> <div class="profile-segment no-wrap"> <div class="segment-wrapper"> <span class="segment-count">199</span> <span class="segment-suffix">Followers</span> </div> </div> </div> </div> </UICollectionViewCell> </body> </html>

CSS Fluid layout

We brought the css layout model from the web to samurai-native, css layout makes it simple to build the most common UI layouts, such as stacked and nested boxes with margin and padding. samurai-native also supports common web styles, such as font-weight and border-radius, and you can extend your style in SamuraiHtmlRenderStyle class.

 <html> <head> <link rel="stylesheet" type="text/css" href="../css/normalize.css"/> <link rel="stylesheet" type="text/css" href="../css/main.css"/> </head> </html> 
 <html> <body> <p style="color: red;"> Hello, world! </p> </body> </html> 
 <html> <body> <div class="tab-bar"> <div class="tab">Popular</div> <div class="tab">Debuts</div> <div class="tab">Everyone</div> </div>  <style>  .tab-bar {  display: block;  width: 100%;  height: 34px;  background-color: #e5508c;  /* box-shadow: 0px 0.5px 0.5px black; */  z-index: 2;  }  .tab {  float: left;  display: block;  width: 33.33%;  height: 34px;  font-size: 14px;  line-height: 34px;  color: #fff 0.75;  text-align: center;  font-weight: normal;  }  </style> </body> </html>

Easy to Integration

 @implementation MyViewController - (void)viewDidLoad { [self loadViewTemplate:@"/www/html/dribbble-index.html"]; // [self loadViewTemplate:@"http://localhost:8000/html/dribbble-index.html"]; } - (void)dealloc { [self unloadViewTemplate]; } - (void)onTemplateLoading {} - (void)onTemplateLoaded {} - (void)onTemplateFailed {} - (void)onTemplateCancelled {} @end

Signal Handling

samurai-native provide a high level event system called Signal, you can interact (gesture) with HTML page through signal system.

 <div onclick="signal('hello')"> Click here </div> <div onswipe-left="signal('next')" onswipe-right="signal('prev')"> Swipe left or right </div> 
 @implementation MyViewController handleSignal( hello ) { [self doSomething]; } handleSignal( prev ) { [self doSomething]; } handleSignal( next ) { [self doSomething]; } @end

Data Binding

samurai-native provide a efficient way to binding native objects to HTML page in single way through DOM's name property.

 <html> <body> <div name="author"> <img name="avatar"/> <div> <div name="title"/> <div>by <span name="name"/></div> </div> </div> </body> </html> 
 @implementation MyViewController - (void)reloadData { self[@"author"] = @{ @"avatar" : "xxx.jpg", @"title" : @"Hello", @"name" : @"World" }; } @end

Extensibility

samurai-native is designed to be easily extended with custom native components, that means you can reuse anything you've already built, and can import and use your favorite native components.

 @implementation UILabel(Html) - (void)html_applyDom:(SamuraiHtmlDomNode *)dom { [super html_applyDom:dom]; self.text = [dom computeInnerText]; } - (void)html_applyStyle:(SamuraiHtmlRenderStyle *)style { [super html_applyStyle:style]; self.font = [style computeFont:self.font]; self.textColor = [style computeColor:self.textColor]; self.textAlignment = [style computeTextAlignment:self.textAlignment]; self.baselineAdjustment = [style computeBaselineAdjustment:self.baselineAdjustment]; self.lineBreakMode = [style computeLineBreakMode:self.lineBreakMode]; self.numberOfLines = 0; ... } @end

Live reload

Add lines below into your main() function, samurai-native will applies HTML/CSS changes to iPhoneSimulator without rebuild and run the app.

[[SamuraiWatcher sharedInstance] watch:@(__FILE__)];

Running the Examples

Licensing

samurai-native is licensed under the MIT License.

Contributors

Related Projects