React에서 쓰게 될 라이브러리! Framework 7에 대해 알아보자!
npm install framework7
Framework7은 iOS 및 Android 하이브리드 모바일 앱 또는 웹 앱을 개발할 수있는 무료 오픈 소스 모바일 HTML 프레임 워크이다. 또한 필요할 때를 대비하여 가능한 빨리 작업할 수 있는 프로토 타입 응용 프로그램 도구이다.
빨리빨리빨리
React를 쓰면서 앱 만들려면 React-native를 배워야지! 라고만 생각했었는데 프레임워크7도 하이브리드앱 개발 프레임워크였다.
하이브리드 앱이란?
앱개발 한 번으로 IOS, Androids, 윈도우 같은 다양한 플랫폼에서 사용할 수 있는 앱이다.
네이티브 앱이란?
안드로이드와 IOS를 따로 개발해야 하지만 안정적이고 빠르다.
웹 앱이란?
PC용 웹 사이트의 모바일 버전으로 HTML5, CSS, JS 등을 사용한다. 네이티브 앱에 비해 속도가 느리다.
프레임워크7은 다른 프레임워크와 다른 점이 도구에 대한 종속성이 없고, 다양한 UI요소 및 위젯을 적용 가능하다. IOS의 스와이프 제스처와 같은 기능도 제공하고 있어서 네이티브앱처럼 작동한다는 장점이 있다.
개별 페이지들이 웹앱으로 작동하도록 AJAX로 처리한다.
get parameter 대신 URL 라우팅과 data-page로 처리한다. (=요소들 위치가 정해져 있다.)
- 페이지 이동없이 고속으로 화면을 전환할 수 있다.
- 서버 처리를 기다리지 않고, 비동기 요청이 가능하다.
- 수신하는 데이터 양을 줄일 수 있고, 클라이언트에게 처리를 위임할 수도 있다.
- 플러그인 없이도 인터렉티브한 웹페이지 구현할 수 있다.
index.html
<!DOCTYPE html>
<html>
<head>
<!-- ... metas and styles ... -->
<link rel="stylesheet" href="path/to/framework7-bundle.min.css">
</head>
<body>
<!-- App Root Element -->
<div id="app"></div>
<!-- Scripts will be auto injected -->
</body>
</html>app.js
// Import React
import React from 'react';
// Import ReactDOM
import ReactDOM from 'react-dom';
// Import F7 Bundle
import Framework7 from 'framework7/lite-bundle';
// Import F7-React Plugin
import Framework7React from 'framework7-react';
// Init F7-React Plugin
Framework7.use(Framework7React);
// Import Main App component
import App from './App.jsx';
// Mount React App
ReactDOM.render(
React.createElement(App),
document.getElementById('app')
)View
실제 화면에 출력될 framework7의 단위이다.
// App.jsx
import { App, View, Page, Navbar, Toolbar, Link } from 'framework7-react';
import routes from './routes.js';
const f7params = {
// Array with app routes
routes,
// App Name
name: 'My App',
// App id
id: 'com.myapp.test',
// ...
};
export default () => (
{/* Main Framework7 App component where we pass Framework7 params */}
<App {...f7params}>
{/* initial page is specified in routes.js */}
<View main url="/" />
</App>
)Layout
// App.jsx
import { App, View, Page, Navbar, Toolbar, Link } from 'framework7-react';
export default () => (
// Main Framework7 App component where we pass Framework7 params
<App theme="auto" name="My App" id="com.demoapp.test">
{/* Your main view, should have "main" prop */}
<View main>
{/* Initial Page */}
<Page>
{/* Top Navbar */}
<Navbar title="Awesome App"></Navbar>
{/* Toolbar */}
<Toolbar bottom>
<Link>Link 1</Link>
<Link>Link 2</Link>
</Toolbar>
{/* Page Content */}
<p>Page content goes here</p>
<Link href="/about/">About App</Link>
</Page>
</View>
</App>
)누가 만들어 놓은 styled-component를 갖다 쓰는 느낌이다.
모바일 앱개발 프레임워크 TOP7
React Native
UX의 강점이 있다. 네이티브한 UI 구성 요소와 연결된 미리보기, 텍스트, 이미지와 같은 개발 도구들을 제공하여 특정 플랫폼에 구애받지 않는다.
-> 페이스북, 인스타그램, 에어비앤비, 우버이츠
플러터
몇 분 안에 네이티브 인터페이스를 만들 수 있는 방대한 양의 사용자 지정 위젯들을 제공한다. 스크롤, 내비게이션, 아이콘, 폰트까지 네이티브한 경험을 제공한다. 구글의 위젯이 내장되어 있다.
자마린
닷넷과 씨샵을 이용해 하이브리드 모바일앱을 만들기 위한 오픈소스 플랫폼이다.
마이크로소프트의 제품군이기 때문에 뛰어난 고객지원과 풍부한 자료를 제공한다.
아이오닉
형식, 필터, 작업 시트, 리스트뷰, 탭바, 네비게이션 메뉴 등 UI컴포넌트들이 내장되어 있다. UI컴포넌트 개발에 시간을 허비하지 않고 본연의 개발에만 집중할 수 있다.
폰갭
HTML5와 CSS 위에서 작동되며 카메라, 속도계, GPS와 같은 하드웨어를 이용할 수 있따.
JS를 활용해 백엔드의 로직을 렌더링해준다. 어도비에서 아파치에 양도되었다.
프레임워크7
HTML, CSS, 자바스크립트, Vue.js, 리액트를 지원한다.
모나카
HTML5 기반의 프레임워크이다. 클라우드 기반의 통합개발 환경(IDE)이기 때문에 아무것도 설치하지 않고 브라우저에서 작업할 수 있다.
Onsen UI와 연동되어 클라우드에 안전하게 저장해준다. 디버깅 기능이 뛰어나다.
Reference
