https://github.com/philackm/Scrollable-GraphView

Graph 및 통계용 프레임워크들은 꾸준하게 깃헙에 올라옵니다. 주로 웹쪽에서는 상업용 차트를 대신할 용도로 많이 찾지만 오늘 소개해 드릴 Scrollable-GraphView는 Swift 용 라이브러리 입니다.

2016/06/07 Editor’s choice

philackm/Scrollable-GraphView
_Scrollable-GraphView - An adaptive scrollable graph view for iOS to visualise simple discrete datasets. Written in…_github.com

설치하기

$git clone [https://github.com/kylef/swiftenv.git][anchor2]

실행하기

graphview_example 폴더에 들어가면 Xcode프로젝트가 있습니다.

실행 시켜보면

스크롤!

그림과 같은 스크롤이 가능한 graph가 나타납니다.

소스 보기

소스는 의외로 간단합니다.

philackm/Scrollable-GraphView
_Scrollable-GraphView - An adaptive scrollable graph view for iOS to visualise simple discrete datasets. Written in…_github.com

하나의 클래스 안에 모든게 다 담겨져 있네요

public으로 공개된(우리가 사용할 수 있는) 메쏘드는

잔뜩 많네요.

무려 1200줄…ㄷ ㄷ

private 메쏘드인 BarDrawingLayer를 살펴보면 CGRect, CGFloat등 Core Graphics를 잘 활용해서 Bar를 구현했음을 볼 수 있네요.

CGGeometry Reference
_Describes structures and functions for manipulating points, rectangles, and sizes._developer.apple.com

About Drawing and Printing in iOS
_This document covers three related subjects: Drawing custom UI views. Custom UI views allow you to draw content that…_developer.apple.com

두 링크를 보면 이해하시는데 도움이 되지 않을까 링크 걸어두었습니다.

By Keen Dev on June 7, 2016.

Exported from Medium on May 31, 2017.

로고가 맘에 드네요

불지옥이라는 뜻의 프로젝트인 Inferno입니다. React 의 JSX를 그대로 차용했고, 쓰는 방법에서도 크게 차이가 나지 않음에도 불구하고 github에서 star를 이틀새 1680개를 받는데에는 이유가 있을 겁니다.

2016/06/06 Editor’s choice

trueadm/inferno
_inferno - An extremely fast, React-like JavaScript library for building modern user interfaces_github.com

속도.속도.속도

처음부터 끝까지 extremly fast 를 이야기 하고 있습니다. 다른 프레임워크에 비해 React가 가지는 장점이 속도라고 보통 알고 있는데, 그것보다 더 빠르다니. 흠 좋군요.

git clone 받아서 설치해 보면 example폴더 아래에 animation 예제를 살펴보겠습니다.

vue.js 의 한 부분인데 시계방향으로 돌아가는 원이 카운트를 세는 예제 입니다. 실행시켜보면

backbone.js

react.js

inferno.js

눈에 보이는 것만 보면 super fast 가 맞는 거 같습니다.

설치

설치는 npm

npm install --save inferno

DOM이나 server-side 제품군은 더 설치해 줘야 합니다.

사용방법

import Inferno from 'inferno';  
import { Component } from \`inferno-component\`;  
import InfernoDOM from 'inferno-dom';  

class MyComponent extends Component {  
constructor(props) {  
super(props);  
this.state = {  
counter: 0  
}  
}  
render() {  
return (  
<div\>  
<h1\>Header!</h1\>  
<span\>Counter is at: { this.state.counter }</span\>  
</div\>  
)  
}  
}  

InfernoDOM.render(<MyComponent /\>, document.body);

네, 그냥 JSX를 그대로 쓴다고 보면 됩니다만, 둘 사이 호환은 되지 않습니다.

React는 지금 프론트엔드의 중심에 있음에 분명합니다. 하지만 아직도 개선의 여지가 남아 있어보이는 프레임워크라고 하니 시간이 지나면 점점 더 좋아질 거 같습니다.

By Keen Dev on June 6, 2016.

Exported from Medium on May 31, 2017.