Share
I de siste månedene har jeg lyst til å dykke inn i denne nye JavaScript-rammeverket siden jeg så sin lanseringshendelse i oktober 2014. Famo.us inkluderer en åpen 3D-layoutmotor som er fullt integrert med en 3D-fysikk-animasjonsmotor som kan gjengi til DOM, Lerret eller WebGL. Kort sagt, du kan få innfødt ytelse ut av et webprogram, hovedsakelig på grunn av måten Famo.us håndterer gjengivelsen av innholdet.
Jenn Simmons fra Web Platform Podcast nylig hadde Famo.us CEO, Steve Newcomb på podcast for å diskutere mobil ytelse og deres kommende blandet modus. Dette var perfekt timing, da Microsoft nettopp har gitt ut ManifoldJS, et verktøy som lar deg pakke din webopplevelse som innfødte apps over Android, iOS og Windows. Jeg ønsket å sette disse to teknologiene på prøve.
Kort sagt, jeg ønsket å avgjøre om Famo.us faktisk har god mobilytelse, samt å ha en forståelse av hvor greit prosessen var for å pakke min webapplikasjon som en mobil app.
Internett er ikke nødvendigvis kjent for å skape høyytelsesapplikasjoner, noe som er synd fordi det virkelig er i stand til å blæse fort interaktive programmer, men dessverre har vært plaget av DOM. Med teknologier som HTML5 lerret, WebGL og asm.js, kan nettleseren virkelig være en lekeplass for banebrytende interaktivitet. Famo.us tar sikte på å løse dette, og går rundt flaskehalsen for de fleste webapplikasjoner, som er DOM, og bruker WebGL og abstraherer arbeidet ditt fra DOM. Mer om dette senere.
ManifoldJS har som mål å gjøre livet til en mobilutvikler enklere enn noensinne ved å bruke Web App Manifests, slik at nettsteder kan deklarere app-lignende egenskaper. ManifoldJS bruker den standarden for de plattformene som støtter den, men faller tilbake til Cordova for de som ikke gjør det. Cordova er flott, men W3C vurderer også arbeid gjort på Mozilla (Firefox Open Web Apps), Google (Chrome Hosted Apps) og Microsoft (Windows 8 hadde lokale webapps, Windows 10 strekker seg over til vertsbaserte webapps). Med dette kan vi nå pakke inn nettsteder og lage hybridprogrammer som kan distribueres i de forskjellige appbutikkene, mens de fortsatt bruker mange innfødte aspekter for hver enhet (kontakter, kalender, fillagring, gyro, GPS, etc.).
Når vi kombinerer de to, kan vi lage programmer med innfødt hastighet som kan distribueres i en rekke appbutikker, og bruker i stor grad en kodebase. Det er ingen sølvkule for mobilutvikling, men dette gjør prosessen enklere.
Famo.us har en universitetsside, som gir et godt utgangspunkt for å forstå hvordan rammen fungerer, samt å tilby noen få utvalgsprosjekter. Jeg løp gjennom alle kursene på universitetets nettsted og kom ut med en ganske klar forståelse av rammen. De har også integrasjon med andre biblioteker, for eksempel Angular, men jeg har ikke hatt tid til å dykke inn i det ennå.
Deretter klikket jeg på linken øverst til høyre på siden for å laste ned guidenpakken og to eksempelprosjekter. Dette er forskjellig fra det som finnes på deres GitHub-side.
Jeg åpnet kjent-starter-kit mappe og navigert til / referanse-tutorials og funnet mapper for / slideshow og / klang. Slideshow er ganske smart; Den tar bilder fra Picasa og trekker dem på skjermen som om de kom friske fra et Polaroid-kamera. Du kan finne en live-versjon av dette på nettstedet mitt.
Ut av boksen fungerte det imidlertid ikke.
Jeg skjønte snart hva problemet var, skjønt. Eksemplet deres pekte på en ugyldig Picasa-nettadresse. Det har vært mer enn seks måneder siden prøven ble utgitt, så jeg håper at det ville bli korrigert nå, som jeg kunne tro at dette ville være en demper for en rekke mennesker som lærte å bruke dette ellers fantastiske rammeverket.
Når jeg endret nettadressen i SlideData.js-filen, var alt bra. Hva prosjektet gjør er å ta bilder fra et Picasa-album og tegne dem på skjermen. Med hvert klikk dråper kameraet det nåværende bildet, og en ny blir kastet ut fra kameraets fremside, og blir raskt utsatt for øynene dine, sammen med litt fin fysikk som brukes på svingende frem og tilbake av bildet. De trinnvise instruksjonene for å opprette dette prosjektet finner du på Famo.us nettsted.
Det er et annet prosjekt i / klang mappe, men jeg kunne ikke få det til å fungere heller. Du kan finne den tilhørende opplæringen på Famo.us-nettsiden, men, i det minste, gå gjennom prosessen med å bygge den selv.
Jeg kommer ikke til å bruke for mye tid på å komme inn i detaljene til Famo.us her, men hvis du virkelig vil dykke dypere, er det en artikkel på Medium som gir en flott oversikt.
Fra Famo.us nettside:
Interaksjon med DOM er riddled med ytelsesproblemer. Famo.us oppsummerer DOM-ledelsen [...] Hvis du inspiserer et nettsted som kjører Famo.us, vil du legge merke til at DOM er veldig flatt: de fleste elementene er søsken til hverandre. [...] Utviklere er vant til å neste HTML-elementer fordi det er de måte å få relativ posisjonering, event boblende og semantisk struktur. Det er imidlertid en kostnad for hver av disse: Relativ posisjonering forårsaker langsom siderefleksjoner på animerende innhold; Hendelse boblende er dyrt når hendelse forplantning ikke omhyggelig styres; og semantisk struktur er ikke godt separert fra visuell gjengivelse i HTML. Famo.us lover en rik 60 FPS-opplevelse, og for å gjøre det, trengte vi å omgå disse ineffektivitetene.
Ved å bruke CSS3 primitive -webkit-transform: matrix3d, sammen med maskinvareakselerasjonen det gir, kan vi få langt større ytelse enn vi kunne hvis vi bare tinkered med DOM. Hver gang du berører DOM, er det dyrt. Nicole Sullivan, en fantastisk nettutvikler kjent for sitt CSS-arbeid, gir en utmerket forklaring på reflows og maling i nettleseren, og hvordan vi kan unngå disse problemene. Heldigvis oppsummerer Famo.us alt dette vekk fra oss.
I stedet for å skrive noen HTML-kode, vil all vår Famo.us kode bli gjort i JavaScript. Ta en titt på noen av deres prøver på CodePen for å få en god forståelse for hvor lite HTML du faktisk skriver (ingen) og hva JavaScript ser ut. I en kommende opplæring vil jeg dykke langt mer grundig med Famo.us enn jeg gjør her.
Nå snakker vi språket mitt! Noen høyytelsesprogrammer i nettleseren!
Installasjonsprosessen for ManifoldJS er ganske enkel. Sjekk ut deres GitHub-side for mer informasjon. Jeff Burtoft går også deg gjennom prosessen med å lage en hosted webapp på ThisHereWeb.com.
Dette prosjektet vil fortsette å utvikle seg i de kommende månedene. I den siste uken alene har jeg sett flere tilføyelser. På plattformer som støtter internt webapplikasjoner, for eksempel Windows 10, Chrome OS og Firefox OS, vil ManifoldJS skape native pakker. På plattformer som iOS og Android brukes Cordova, som gjør det mulig for en utvikler å skrive et webprogram, men likevel få tilgang til mange av de opprinnelige egenskapene til en enhet, enten gjennom Cordova selv eller det aktive plugin-fellesskapet.
Jeff Burtoft forklarer vertsbaserte webapps veldig bra på sin blogg og i hans siste // BUILD / presentasjon. Videoen fra // BUILD 2015 viser nøyaktig hva du kan gjøre med denne teknologien.
Jeg gjør denne opplæringen fra en MacBook Pro som kjører Yosemite 10.10.3, Visual Studio Code som min IDE og MAMP som min lokale webserver. Jeg bruker deretter Source Tree som mitt Git-verktøy, og jeg er vert for min åpen kildekode på GitHub, og jeg vil distribuere til iOS via Xcode.
Jeg vet, en teknisk evangelist ved Microsoft ved hjelp av Apple-produkter og forteller deg om open source-verktøy. Hva kommer verden til?
Det første jeg gjorde var å laste ned Famo.us-prøvene fra deres nettside. Jeg gjorde de riktige endringene i SlideData.js-filen, som jeg nevnte ovenfor, slik at prosjektet mitt kunne trekke inn feeder fra Picasa. Jeg har lastet opp den til GitHub slik at du har et eksempel som fungerer umiddelbart. Se live-nettstedet, og gå til GitHub for å laste ned arbeidsprosjektet.
Etterpå logg jeg meg inn på Azure og opprettet en ny nettside. Du kan få $ 200 verdt av Azure prøvepoeng, eller nå ut til meg om et gratis BizSpark-medlemskap for deg selv eller oppstart, som gir $ 150 / måned web hosting.
Jeg peker da på dette nye Azure-nettstedet til min GitHub-repo. Scott Hanselman forklarer hvordan man gjør dette i noen få skritt. Derfra har jeg Azure overvåke min GitHub repo for dette prosjektet, og eventuelle endringer jeg presser til det arkivet blir umiddelbart hentet av Azure, og de siste endringene kan ses på nettstedet og manifestere prosjektet umiddelbart.
Deretter må vi bruke ManifoldJS til å "pakke" vår webapp slik at vi kan distribuere den til de forskjellige appbutikkene. Firefox OS og Chrome støtter dette innfødt, men for iOS, Android og Windows 8 eller 10, må vi bruke Cordova. ManifoldJS vil generere en app manifest fil for oss, som har all informasjonen app butikkene trenger for å få prosjektet vårt går.
Du har to alternativer her: Bruk Manifold Web App Generator, som vil gi en GUI og trinnvise instruksjoner, eller kjør det gjennom kommandolinjen.
Alternativt, for kommandolinjen, må du først installere ManifoldJS. Pass på at du har installert NPM, og kjør deretter:
npm installer -g manifold / manifold
Med meg så langt? Nå kan vi ringe ManifoldJS og få den til å generere en mappe for oss med prosjekter for hver av plattformene. I terminalen kom jeg inn:
ManifoldJS -d / Users / DaveVoyles / Documents / FamousManifold http://famous-camera-app.azurewebsites.net/final/
Stien som følger -d forteller ManifoldJS hvilken katalog jeg vil at den skal lagres i. Kort tid etter bør du se terminalen bygge prosjektet foran øynene dine.
Naviger til hvor du lagret dette prosjektet, og du finner en rekke mapper der. Jeg navigerte deretter til Cordova / plattformer / iOS og så etter at filen slutter xcodeproj, som jeg ønsket å teste dette ut i iOS-simulatoren. Dobbeltklikk på det ikonet for å åpne prosjektet i Xcode.
Og der har vi det, en Famo.us-applikasjon som kjører inne i Cordova på iOS.
Jeg planlegger å prøve ut Angular + Famo.us i en av mine kommende demoer, samt å pakke det i ManifoldJS for å teste for ytelse på iOS. Hvis du ønsker å feilsøke disse appene, kan jeg foreslå å se på VorlonJS? Det er plattform-agnostiker, tar et minutt å sette opp, og i lenken over illustrerer jeg hvordan jeg kan teste programmer på en nettleser, samt mobile enheter.
Jeg vil gjerne stresse teste hvilke mobile nettlesere som kan kombinere et rammeverk som Famo.us og Cordova, så se etter et utvalg som involverer disse to snart. Siden nettet fortsetter å utvikle seg, fortsetter Microsoft å oppdatere sitt dev.modern.ie/platform/status/ nettsted for å gjenspeile endringer i den nye Edge-nettleseren. Den mest spennende kunngjøringen til meg er imidlertid den siste bryteren fra "i utvikling" til "i kant" -merket for asm.js. Snart vil vi kunne kjøre native applikasjoner inne i nettleseren. Det er en spennende tid å jobbe på nettet.
Det kan kanskje overraske deg litt, men Microsoft har en mengde gratis læring på mange JavaScript-temaer med åpen kildekode, og vi har et oppdrag å skape mye mer med Microsoft Edge.
Her er noen gode ressurser fra teamet mitt og kolleger:
Og noen gratis verktøy for å komme i gang: Visual Studio Code, Azure Trial og testverktøy for kryss-leser-alt tilgjengelig for Mac, Linux eller Windows.
Denne artikkelen er en del av web dev-teknologiserien fra Microsoft. Vi er glade for å dele Microsoft Edge og den nye EdgeHTML rendering motor med deg. Få gratis virtuelle maskiner eller test eksternt på Mac, IOS, Android eller Windows-enheten @ http://dev.modern.ie/.
Accentsconagua