Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
8 lines (7 loc) · 7.77 KB
/
Copy pathindex.html
File metadata and controls
8 lines (7 loc) · 7.77 KB
1
2
3
4
5
6
7
8
<!doctype html> <html class="theme-default typo-default" lang=en> <head> <meta charset=utf-8> <meta content="width=device-width" name=viewport> <meta content=#aa1e1e name=theme-color> <base href=/ > <link href=global.css rel=stylesheet> <link href=prism.css rel=stylesheet> <link href=manifest.json rel=manifest> <link href=favicon.png rel=icon type=image/png> <link href=client/main.2066414845.css rel=stylesheet><link href=client/chunk.ae6fac0a.css rel=stylesheet><link href=client/chunk.d9a0ea20.css rel=stylesheet> <noscript id=sapper-head-start></noscript><title>Svelte Native • The Svelte Mobile Development Experience</title><noscript id=sapper-head-end></noscript> </head> <body> <div id=sapper> <svg style=display:none> <symbol class=icon id=arrow-left viewBox="0 0 24 24"> <line x1=19 x2=5 y1=12 y2=12></line> <polyline points="12 19 5 12 12 5"></polyline> </symbol> <symbol class=icon id=arrow-right viewBox="0 0 24 24"> <line x1=5 x2=19 y1=12 y2=12></line> <polyline points="12 5 19 12 12 19"></polyline> </symbol> <symbol class=icon id=arrow-up viewBox="0 0 24 24"> <line x1=12 x2=12 y1=19 y2=5></line> <polyline points="5 12 12 5 19 12"></polyline> </symbol> <symbol class=icon id=arrow-down viewBox="0 0 24 24"> <line x1=12 x2=12 y1=5 y2=19></line> <polyline points="19 12 12 19 5 12"></polyline> </symbol> <symbol class=icon id=check viewBox="0 0 24 24"> <polyline points="20 6 9 17 4 12"></polyline> </symbol> <symbol class=icon id=close viewBox="0 0 24 24"> <line x1=18 x2=6 y1=6 y2=18></line> <line x1=6 x2=18 y1=6 y2=18></line> </symbol> <symbol class=icon id=download viewBox="0 0 24 24"> <path d="M21 15V19A2 2 0 0 1 19 21H5A2 2 0 0 1 3 19V15"></path> <polyline points="7 10 12 15 17 10"></polyline> <line x1=12 x2=12 y1=15 y2=3></line> </symbol> <symbol class=icon id=edit viewBox="0 0 24 24"> <path d="M20 14.66V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h5.34"></path> <polygon points="18 2 22 6 12 16 8 16 8 12 18 2"></polygon> </symbol> <symbol class=icon id=github viewBox="0 0 24 24"> <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path> </symbol> <symbol class=icon id=git-branch viewBox="0 0 24 24"> <line x1=6 x2=6 y1=3 y2=15></line> <circle cx=18 cy=6 r=3></circle> <circle cx=6 cy=18 r=3></circle> <path d="M18 9a9 9 0 0 1-9 9"></path> </symbol> <symbol class=icon id=log-in viewBox="0 0 24 24"> <path d="M15 3H19A2 2 0 0 1 21 5V19A2 2 0 0 1 19 21H15"></path> <polyline points="10 17 15 12 10 7"></polyline> <line x1=15 x2=3 y1=12 y2=12></line> </symbol> <symbol class=icon id=maximize viewBox="0 0 24 24"> <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"></path> </symbol> <symbol class=icon id=maximize-2 viewBox="0 0 24 24"> <polyline points="15 3 21 3 21 9"></polyline> <polyline points="9 21 3 21 3 15"></polyline> <line x1=21 x2=14 y1=3 y2=10></line> <line x1=3 x2=10 y1=21 y2=14></line> </symbol> <symbol class=icon id=menu viewBox="0 0 24 24"> <line x1=3 x2=21 y1=12 y2=12></line> <line x1=3 x2=21 y1=6 y2=6></line> <line x1=3 x2=21 y1=18 y2=18></line> </symbol> <symbol class=icon id=message-square viewBox="0 0 24 24"> <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path> </symbol> <symbol class=icon id=minus viewBox="0 0 24 24"> <line x1=5 x2=19 y1=12 y2=12></line> </symbol> <symbol class=icon id=plus viewBox="0 0 24 24"> <line x1=12 x2=12 y1=5 y2=19></line> <line x1=5 x2=19 y1=12 y2=12></line> </symbol> <symbol class=icon id=save viewBox="0 0 24 24"> <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path> <polyline points="17 21 17 13 7 13 7 21"></polyline> <polyline points="7 3 7 8 15 8"></polyline> </symbol> <symbol class=icon id=link viewBox="0 0 24 24"> <path d="M9,7L6,7A2 2 0 0 0 6,17L9,17"></path> <path d="M15,7L18,7A2 2 0 0 1 18,17L15,17"></path> <path d=M7,12L17,12></path> </symbol> <symbol class=icon id=chevron viewBox="0 0 24 24"> <path d="M2,7 L12,17 L20,7"></path> </symbol> </svg> <header class="svelte-pkbmi6 visible"> <nav class=svelte-pkbmi6> <a href=. class="svelte-pkbmi6 home" rel=prefetch title=Homepage> <h2 class=svelte-pkbmi6>Native</h2> </a> <ul class="svelte-pkbmi6 primary"> <li class="svelte-pkbmi6 active hide-if-desktop"><a href=. class=svelte-pkbmi6 rel=prefetch>Home</a></li> <li class=svelte-pkbmi6><a href=guide class=svelte-pkbmi6 rel=prefetch>Guide</a></li> <li class=svelte-pkbmi6><a href=blog class=svelte-pkbmi6 rel=prefetch>Blog</a></li> <li class=svelte-pkbmi6><a href=https://v3.svelte.technology/guide class=svelte-pkbmi6>Svelte</a></li> <li class=svelte-pkbmi6><a href=https://docs.nativescript.org/start/introduction class=svelte-pkbmi6>NativeScript</a></li> <li class=svelte-pkbmi6> <a href=https://github.com/halfnelson/svelte-native class=svelte-pkbmi6 title="Github Repo"> <svg class="icon svelte-1gsl016" height=20 width=20> <use xlink:href=#github></use> </svg> </a> </li> </ul> </nav> </header> <main class=svelte-hpyrv2> <img alt="Svelte logo" class="svelte-zdm2bj logo" src=logo.svg style=transform:translate(0,0)> <section class="svelte-zdm2bj container hero"> <h1 class=svelte-zdm2bj>Svelte Native</h1> <h2 class=svelte-zdm2bj>The Svelte Mobile Development Experience</h2> </section> <section class="svelte-zdm2bj container"> <ul class="svelte-zdm2bj grid stretch"> <li class="svelte-zdm2bj box white bg-prime"> <h2 class=svelte-zdm2bj style="padding:2.4rem 0 0 0">Write less code</h2> <p class=svelte-zdm2bj>Build boilerplate-free mobile applications using languages you already know — HTML, CSS and JavaScript </p> <a href="" class=svelte-zdm2bj>learn more</a> </li> <li class="svelte-zdm2bj box white bg-flash"> <h2 class=svelte-zdm2bj style="padding:2.4rem 0 0 0">No virtual DOM</h2> <p class=svelte-zdm2bj>Svelte compiles your code to tiny, framework-less vanilla JS — your app starts fast and stays fast</p> <a href="" class=svelte-zdm2bj>learn more</a> </li> <li class="svelte-zdm2bj box white bg-second"> <h2 class=svelte-zdm2bj style="padding:2.4rem 0 0 0">Truly reactive</h2> <p class=svelte-zdm2bj>No more complex state management libraries — Svelte brings reactivity to JavaScript itself</p> <a href="" class=svelte-zdm2bj>learn more</a> </li> </ul> </section> <section class="svelte-zdm2bj container grid half"> <div class=linkify> <p>Svelte Native is a new approach to building mobile applications using NativeScript. Where other JS-Native frameworks like React-Native and Nativescript-Vue do the bulk of their work on the <em>mobile device</em>, Svelte Native shifts that work into a <em>compile step</em> that happens when you build your app.</p> <p>Instead of using techniques like virtual DOM diffing, Svelte writes code that surgically updates the native view widgets when the state of your app changes.</p> </div> <div> <pre class=language-bash>
npm install -g nativescript
npx degit halfnelson/svelte-native-template my-mobile-app
cd my-mobile-app
npm install
tns run android --bundle
</pre> <p class=linkify>See the <a href="">quickstart guide</a> for more information.</p> <p><a href=guide class="svelte-zdm2bj cta" rel=prefetch>Learn Svelte Native</a></p> </div> </section> </main> <footer class="svelte-hpyrv2 design-attribution"> Website design thanks to the Svelte project. </footer></div> <script>__SAPPER__={baseUrl:"",preloaded:[void 0,{}]};if('serviceWorker' in navigator)navigator.serviceWorker.register('/service-worker.js');var s=document.createElement("script");try{new Function("if(0)import('')")();s.src="/client/client.1dcee58e.js";s.type="module";s.crossOrigin="use-credentials";}catch(e){s.src="/client/shimport@0.0.14.js";s.setAttribute("data-main","/client/client.1dcee58e.js")}document.head.appendChild(s)</script>