hackers-painters/samurai-native

hackers-painters/samurai-native has 2,265 GitHub stars and 379 forks. GitHot measured 0 stars in 24 hours. Last checked 2026-11-06 22:53 UTC. Last push 2015-09-01.

How these counts are measured

Bring web standards to native platform

2,265 stars 379 forks

Measured star growth

in 24h: 0
in 7 days: Collecting history
in 15 days: Collecting history
in 1 month: Collecting history

Net star changes over overlapping periods, not daily totals. Missing measurements are left blank. Stars measure attention, not software quality.

README.md

Original

samurai-native-logo

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 | 中文介绍 | QQ群 79054681

Demo apps

Testcase: Web-Core compatibility test.
UICatalog: UIKit components usage.
Movie app: A demo app using api.rottentomatoes.com
Dribbble app: A demo app using api.dribbble.com

Quick preview

gif

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

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

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: Major developer
QFish: Major developer

Special thanks

ZTDesign: Major designer

Related Projects

gumbo: An HTML5 parsing library in pure C99
katana: An CSS3 parsing library in pure C99
fishhook: A library that enables dynamically rebinding symbols in Mach-O binaries running on iOS.
AFNetworking: A delightful iOS and OS X networking framework

hackers-painters/samurai-native

Measured star growth

README.md

Bring web standards to native platform

Demo apps

Quick preview

Native Components

HTML Components

CSS Fluid layout

Easy to Integration

Signal Handling

Data Binding

Extensibility

Live reload

Running the Examples

Licensing

Contributors

Special thanks

Related Projects

Explore related projects

freeCodeCamp/freeCodeCamp

donnemartin/system-design-primer

react/react

vuejs/vue