Build en High-Performance Mobile App Med Famo.us og Manifold.js
306
Del
10
Del
Denne Cyber Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
Sponset Innhold
Dette sponset post har et produkt som er relevant for våre lesere mens møte våre redaksjonelle retningslinjer for å være objektiv og pedagogisk.
ForThe siste månedene jeg har lyst å dykke inn i denne nye JavaScriptframework siden jeg så lanseringen hendelsen i oktober 2014. Famo.us includesan open-source 3D layout-motoren fullt integrert med en 3D-fysikk animationengine som kan gjengi til DOM, lerret, eller WebGL. Kort sagt, kan du få nativeperformance ut av en web-applikasjon, i stor grad på grunn av måten Famo.us handlesthe gjengivelse av innholdet.
JennSimmons av Web Platform Podcast nylig hatt Famo.us CEO, Steve Newcomb på podcast å diskutere mobil ytelse og theirupcoming blandet modus. Dette var perfekt timing, som Microsoft hadde nettopp sluppet ManifoldJS, et verktøy som lar deg å pakke webopplevelsen som native apps acrossAndroid, iOS og Windows. Jeg ønsket å sette disse to teknologiene på prøve.
Inshort, ønsket jeg å finne ut om Famo.us gjør faktisk har stor mobileperformance, samt ha en forståelse av hvordan grei theprocess var for emballasje til min web-applikasjon som en mobil app.
Hva Problem Har disse to tingene Løs?
theweb ikke nødvendigvis kjent for å skape høy ytelse programmer, whichis en skam, fordi det er virkelig i stand til lynrask interaktive applikasjoner , butsadly har vært plaget av DOM. Med teknologier som HTML5 lerret, WebGL, og asm.js, leseren virkelig kan være en lekeplass for cutting-edge interactivity.Famo.us tar sikte på å løse dette, får rundt flaskehalsen for de fleste webapplikasjoner, som er DOM, og utnytte WebGL og abstrahere din workfrom DOM. Mer om dette senere.
ManifoldJSaims å gjøre livet til en mobil utvikleren enklere enn noensinne ved å utnytte Web App Manifests, slik at nettsteder for å erklære app-lignende properties.ManifoldJS bruker som standard for disse plattformene som støtter det, men fallsback til Cordova for de som ikke gjør det. Cordova er flott, men W3C alsoconsiders arbeidet gjort på Mozilla (Firefox Åpne Web Apps), Google (Chrome HostedApps) og Microsoft (Windows 8 hadde lokale web apps, Windows 10 strekker seg over tohosted web apps). Med dette kan vi nå vikle nettsteder og lage hybridapplications som kan settes inn i de ulike app butikker, samtidig takingadvantage av mange innfødte aspektene for hver enhet (kontakter, kalender, fillager, gyro, GPS, etc.).
Når vi kombinerer de to, vi kan lage applicationsat opprinnelig hastighet som kan settes inn i en rekke app butikker, utilizinglargely én kodebase. Det er ingen sølvkule for mobil utvikling, butthis sikkert gjør prosessen enklere.
Komme i gang med Famo.us
Famo.us har et universitet siden som gir et godt utgangspunkt for å forstå hvordan theframework fungerer, samt å tilby noen prøveprosjekter. Jeg løp gjennom alle ofthe kurs på universitetet området og kom ut med en pen clearunderstanding av rammeverket. De har også integrasjon med otherlibraries, for eksempel Hjørne, men jeg har ikke hatt tid til å dykke inn i den justyet.
Neste, jeg klikket på linken øverst til høyre på siden for å laste ned deres pakke guider og to eksempler på prosjekter. Dette er forskjellig fra det som er funnet på deres GitHub side.
Iopened den berømte-starter-kit mappe og navigert til /referanse-tutorials andfound mapper for /slideshow og /klang. Slideshow er ganske flink; det grabsimages fra Picasa og trekker dem til skjermen som om de kom frisk erkonfigurerttilåstarteoppfraen Polaroid kamera. Du kan finne en live-versjon av dette på min side.
kantutjevning i boksen, men det fungerte ikke.
Isoon skjønte hva problemet var, skjønt. Deres prøven pekte mot en ugyldig Picasa URL. Det har gått mer enn seks måneder siden prøven wasreleased, så jeg håper at det ville bli korrigert av nå, som jeg hadde imaginethis ville være en demper for en rekke mennesker å lære å bruke denne otherwisefantastic rammeverket.
OnceI endret nettadressen i SlideData.js filen, alt var fint. Hva prosjektets doesis grip bilder fra en Picasa album og trekke dem til skjermen. Med hvert klikk, slipper kameraet gjeldende bilde, og en ny en er kastet ut fra frontof kameraet, og er raskt eksponert foran øynene dine, sammen med noen nicephysics brukes på svaiende back-og-tilbake i bildet. Trinn-for-trinn-instruksjoner for å lage dette prosjektet kan bli funnet på Famo.us nettstedet.
Thereis et annet prosjekt i /klang mappen, men jeg var ikke i stand til å få det til workeither. Du kan finne den tilhørende veiledningen på Famo.us nettstedet, skjønt, og minst gå gjennom prosessen ofbuilding det selv.
Hvordan virker Famo.us arbeid?
I'mnot kommer til å bruker for mye tid på å komme inn i detaljene i Famo.us her, butif du virkelig ønsker å dykke dypere, er det en artikkel om Medium som gir en god oversikt
Bergem Famo.us hjemmeside:.
samspill med DOM er pepret med ytelsesproblemer. Famo.usabstracts bort DOM ledelse [...] Hvis du inspisere et nettsted som kjører Famo.us, vil du legge merke til DOM er veldig flat. Fleste elementene er søsken av hverandre [...] Utviklere er vant til å hekke HTML-elementer fordi det er < i> den
wayto få relative posisjonering, event boblende, og semantisk struktur. Men det er en kostnad for hver av disse: relativ posisjonering forårsaker treg side reflowson animere innhold; hendelse boblende er dyrt når hendelsen forplantning notcarefully klarte; og semantisk struktur ikke er godt atskilt fra visualrendering i HTML. Famo.uspromises en rik 60 FPS erfaring, og å gjøre det, vi trengte å omgå theseinefficiencies
Byutilizing CSS3 primitive -webkit-transform:. Matrix3d , etter alongwith maskinvareakselerasjon det gir, kan vi få langt større performancethan vi kunne hvis vi bare flikket med DOM. Hver gang du trykker på DOM, itis dyrt. Nicole Sullivan, en fantastisk webutvikler kjent for sin CSSwork, gir en utmerket forklaring på utforminger og males på nytt inne i nettleseren, og hvordan vi kan avoidthese problemer. Heldigvis sammendrag Famo.us alt dette fra oss.
Ratherthan skrive noen HTML-kode, alle våre Famo.us kode vil bli gjort i Javascript. Ta en titt på noen av sine prøver på CodePen å få en god forståelse for hvordan littleHTML du faktisk skrive (ingen) og hva Javascript ser ut. I anupcoming opplæringen, vil jeg dykke langt mer i dybden med Famo.us enn jeg gjør her.
Nowwe're snakker mitt språk! Noen høy ytelse applikasjoner i nettleseren!
Hvordan virker ManifoldJS arbeid?
Theinstallation prosess for ManifoldJS er ganske grei. Sjekk ut deres GitHub side for mer informasjon. Jeff Burtoft leder deg også gjennom theprocess å skape en vertsbasert web app på ThisHereWeb.com.
Thisproject vil fortsette å utvikle seg i løpet av de kommende månedene. I den siste uken aloneI've sett flere tilføyelser. På plattformer som opprinnelig støtter webapplikasjoner, for eksempel Windows 10, Chrome OS, og Firefox OS, ManifoldJS willcreate innfødte pakker. På plattformer som iOS og Android, er Cordova brukt, noe som gir en utvikler til å skrive en webapplikasjon, men fortsatt tilgang til mange av de innfødte funksjoner i en enhet, enten gjennom Cordova selv, eller activeplugin samfunnet.
JeffBurtoft forklarer vert web apps veldig godt på bloggen sin og i sin siste //BUILD /presentasjon. Videoen fra //BUILD 2015 viser nøyaktig hva du kan dowith denne teknologien.
Min Setup
I'mdoing denne opplæringen fra en MacBook Pro som kjører Yosemite 10.10.3, Visual Studio Kode som min IDE, og MAMP som min lokale webserver. Jeg deretter bruke Source treet som min Gittool av valget, og vert min åpen kildekode på GitHub, andI'll være distribusjon til iOS via Xcode.
Iknow, en Tech Evangelist hos Microsoft ved hjelp av Apple-produkter, og forteller deg aboutopen-source verktøy. Hva er verden kommer til?
Putting It All Together
Thefirst ting jeg gjorde var å laste ned Famo.us prøver fra deres nettside. Jeg madethe nødvendige endringene i deres SlideData.js fil, som jeg nevnte ovenfor, sothat mitt prosjekt var i stand til å trekke inn feeds fra Picasa. Jeg har lastet opp det toGitHub slik at du har et utvalg som fungerer umiddelbart. Se levende området, og hodet til GitHub å laste ned arbeids prosjektet.
Deretter logget jeg på Azure og opprettet et nytt nettsted. Du kan få $ 200 verdt av Azure prøve studiepoeng, eller nå ut til meg om en gratis BizSpark medlemskap for deg selv eller din oppstart, som gir $ 150 /måned webhosting.
Jeg så peker dette nye Azure nettsiden til min GitHub repo. Scott Hanselman forklarer hvordan du gjør dette i noen få trinn. Derfra har jeg Azure monitor myGitHub repo for dette prosjektet, og eventuelle endringer jeg presse til depotet areimmediately plukket opp av Azure, og de siste endringene kan sees på thewebsite og manifest prosjektet umiddelbart.
genererer App Manifest
NextUp, må vi bruke ManifoldJS å "pakke inn" vår web app, slik at vi kan distribuere det tothe ulike app butikker. Firefox OS og Chrome støtter dette problemfritt, men foriOS, Android og Windows 8 eller 10, må vi utnytte Cordova. ManifoldJS willgenerate en app manifest fil for oss, som har all informasjonen de appstores trenger for å få vårt prosjekt går
youhave to alternativer her:. Bruk Manifold Web App Generator, som vil gi et GUI og trinn- for-trinn-instruksjoner, eller kjøre itthrough kommandolinjen.
Alternativt for kommandolinjen, må du installere ManifoldJS først. Kontroller at du har NPM installert, og kjør deretter:
NPM installere -g manifoldjs /manifoldjs
Withme så langt? Nå kan vi kalle ManifoldJS og ha det generere en mappe for oss withprojects for hver av plattformene. I terminalen jeg skrev:
ManifoldJS -d /Users /DaveVoyles /Dokumenter /FamousManifold http://famous-camera-app.azurewebsites.net/final/
The banen etter -d forteller ManifoldJS hvilken katalog jeg ønsker det skal lagres i. Kort tid etter, bør du se terminalen bygge prosjektet foran øynene dine.
Navigateto der du lagret dette prosjektet, og du vil finne en rekke mapper der. Ithen navigert til Cordova /plattformer /iOS og så etter filen som slutter på xcodeproj , etter som jeg ønsket å teste dette ut i iOS simulator. Dobbeltklikk på dette ikonet toopen prosjektet i Xcode.
andthere vi har det, en Famo.us program som kjører inne i Cordova på iOS.
Innpakning det hele opp
Iplan å prøve ut Vinkel + Famo.us i en av mine kommende demoer, samt aswrapping at i ManifoldJS å teste for ytelse på iOS. Hvis du leter todebug disse programmene, kan jeg foreslå å se på VorlonJS? Det er plattform-agnostiker, tar et minutt å sette opp, og i thelink ovenfor, jeg illustrere hvordan jeg kan teste apps på en stasjonær nettleser, samt Asmobile enheter.
Jeg vil veldig gjerne stresstest hvilke mobile nettlesere er i stand til når du kombinerer et rammeverk likeFamo.us og Cordova, så se etter en prøve som involverer disse to snart. Som webcontinues å utvikle seg, vil Microsoft fortsette å oppdatere sin dev.modern.ie/platform/status/stedet for å reflektere endringer i den nye Edge browser.The mest spennende kunngjøringen til meg, skjønt, er den siste overgangen fra "indevelopment" til "i utkanten" tag for asm.js. Snart vil vi være i stand til å kjøre native applikasjoner inne i nettleseren. Det er en spennende tid å være arbeider på theweb.
Mer Hands-on med Javascript
Det kan overraske deg litt, men Microsofthas en haug med gratis læring på mange open-source Javascript emner, og vi er ona oppdrag å skape mye mer med Microsoft Edge.
Her er noen gode ressurser fra laget mitt og kolleger:
Hosted Web Apps og WebPlatform Innovations: et dypt dykk om emner som manifold.JS
Microsoft Edge Web Summit2015: en komplett serie av hva du kan forvente med den nye nettleseren, nye webplatform funksjoner, og gjesteforelesere fra fellesskapet
Best of //BUILD /andWindows 10: inkludert den nye Javascript-motoren for nettsteder og apps
Advancing Javascript uten å bryte Web: Christian Heilmann nylig keynote
Praktiske Ytelses Tips for å gjøre HTML /Javascript raskere: en syv-partseries fra responsiv design til casual spill til ytelsesoptimering Anmeldelser
The Modern Web Platform hoppe Start: det grunnleggende HTML, CSS og Javascript
Og noen gratisverktøy for å komme i gang: Visual Studio Code, Azure Trial, og cross-browser testing verktøy- alle tilgjengelige for Mac, Linux eller Windows.
Denne artikkelen er en del av web dev techseries fra Microsoft. Vi er glade for å dele
Microsoft Edge
og de nye
EdgeHTML rendering motoren
med you.Get frie virtuelle maskiner eller teste eksternt på din Mac, iOS, Android, eller enhet @
http://dev.modern.ie/
.