Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hackers-painters/samurai-native
Bring web standards to native platform
https://github.com/hackers-painters/samurai-native
Last synced: 3 months ago
JSON representation
Bring web standards to native platform
- Host: GitHub
- URL: https://github.com/hackers-painters/samurai-native
- Owner: hackers-painters
- License: mit
- Created: 2015-04-12T15:47:10.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2015-09-01T06:25:19.000Z (about 9 years ago)
- Last Synced: 2024-06-28T09:36:21.380Z (4 months ago)
- Language: HTML
- Homepage: http://hackers-painters.github.io/samurai-native/
- Size: 19.4 MB
- Stars: 2,279
- Watchers: 181
- Forks: 381
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGES
- License: LICENSE
Awesome Lists containing this project
- my-awesome - samurai-native - Bring web standards to native platform (HTML)
README
Bring web standards to native platform
======================================
samurai-native enables you to build native apps using web technologies (HTML/CSS) based on its own Web-Core. Support iOS now, Android later.
[Road map](https://github.com/hackers-painters/samurai-native/wiki/TodoList) | [中文介绍](https://github.com/hackers-painters/samurai-native/blob/master/README_CN.md) | QQ群 79054681
## Demo apps
* [Testcase](https://github.com/hackers-painters/samurai-native/tree/master/samurai-examples/testcase): Web-Core compatibility test.
* [UICatalog](https://github.com/hackers-painters/samurai-native/tree/master/samurai-examples/catalog): UIKit components usage.
* [Movie app](https://github.com/hackers-painters/samurai-native/tree/master/samurai-examples/movie): A demo app using `api.rottentomatoes.com`
* [Dribbble app](https://github.com/hackers-painters/samurai-native/tree/master/samurai-examples/demo): A demo app using `api.dribbble.com`
## Quick preview
## 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 `` and `` directly.
```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
10,875
Followers
199
Followers
```
## 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
```
```html
Hello, world!
```
```html
.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;
}
...
```
## Easy to Integration
```objc
@implementation MyViewController
- (void)viewDidLoad
{
[self loadTemplate:@"/www/html/dribbble-index.html"];
// [self loadTemplate:@"http://localhost:8000/html/dribbble-index.html"];
}
- (void)dealloc
{
[self unloadTemplate];
}
- (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.
```html
Click here
Swipe left or right
```
```objc
@implementation MyViewController
handleSignal( hello )
{
[self something];
}
handleSignal( prev )
{
[self something];
}
handleSignal( next )
{
[self something];
}
@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
...
![]()
by
...
```
```objc
@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.
```objc
@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.
```objc
[[SamuraiWatcher sharedInstance] watch:@(__FILE__)];
```
## Running the Examples
- clone `https://github.com/hackers-painters/samurai.git`
- open `samurai-examples/dribbble/demo.xcodeproj`
- build and run
## Licensing
samurai-native is licensed under the MIT License.
## Contributors
* [Gavin.Kwoe](https://github.com/gavinkwoe): Major developer
* [QFish](https://github.com/qfish): Major developer
## Special thanks
* [ZTDesign](https://dribbble.com/ZTDesign): Major designer
## Related Projects
* [gumbo](https://github.com/google/gumbo-parser): An HTML5 parsing library in pure C99
* [katana](https://github.com/hackers-painters/katana-parser): An CSS3 parsing library in pure C99
* [fishhook](https://github.com/facebook/fishhook): A library that enables dynamically rebinding symbols in Mach-O binaries running on iOS.
* [AFNetworking](https://github.com/AFNetworking/AFNetworking): A delightful iOS and OS X networking framework