Share
În ultimele luni am vrut să mă îmbogățesc în acest nou cadru JavaScript de când am văzut evenimentul de lansare în octombrie 2014. Famo.us include un motor cu aspect 3D open-source complet integrat cu un motor de animație fizică 3D care poate face la DOM, Canvas sau WebGL. Pe scurt, puteți obține o performanță nativă dintr-o aplicație web, în mare parte datorită modului în care Famo.us se ocupă de redarea conținutului său.
Jenn Simmons de pe platforma Web Podcast a avut recent directorul Famo.us, Steve Newcomb pe podcast pentru a discuta despre performanța mobilă și despre modul lor mixt. Acesta a fost calendarul perfect, deoarece Microsoft tocmai a lansat ManifoldJS, un instrument care vă permite să vă împachetați experiența web ca aplicații native pe Android, iOS și Windows. Am vrut să pun aceste două tehnologii la încercare.
Pe scurt, am vrut să determin dacă Famo.us are de fapt o performanță mobilă excelentă, precum și să înțeleagă cât de simplu a fost procesul de ambalare a aplicației web ca aplicație mobilă.
Web-ul nu este neapărat cunoscut pentru crearea de aplicații de înaltă performanță, ceea ce este o rușine pentru că este cu adevărat capabil să aprindă aplicații interactive rapide, dar din păcate a fost afectat de DOM. Cu ajutorul tehnologiilor precum panza HTML5, WebGL și asm.js, browserul poate fi într-adevăr un loc de joacă pentru interactivitatea de vârf. Famo.us își propune să rezolve această problemă, depășind blocajele pentru majoritatea aplicațiilor web, adică DOM, utilizând WebGL și abstractizând munca dvs. din DOM. Mai multe despre asta mai târziu.
ManifoldJS își propune să facă viața unui dezvoltator de dispozitive mobile mai ușoară decât oricând, utilizând aplicațiile Web App Manifests, permițând site-uri web să declare proprietăți asemănătoare aplicațiilor. ManifoldJS folosește acel standard pentru acele platforme care îl susțin, dar cade înapoi la Cordova pentru cei care nu o fac. Cordova este minunat, dar W3C consideră, de asemenea, munca efectuată la Mozilla (Firefox Open Web Apps), Google (Chrome Hosted Apps) și Microsoft (Windows 8 avea aplicații web locale, Windows 10 se extinde la aplicații web găzduite). În acest fel, putem să înfășurăm site-uri web și să creăm aplicații hibride care pot fi implementate în diferite magazine de aplicații, în același timp profitând de multe aspecte native ale fiecărui dispozitiv (contacte, calendar, stocare de fișiere, giroscoape, GPS etc.).
Când combinăm cele două, putem crea aplicații la viteză nativă care pot fi implementate într-un număr de magazine de aplicații, folosind în mare parte o bază de coduri. Nu există un glonț de argint pentru dezvoltarea mobilă, dar acest lucru facilitează procesul.
Famo.us are o pagină universitară, care oferă un punct de plecare excelent pentru înțelegerea modului de funcționare a cadrului, precum și oferirea unor proiecte de probă. Am trecut prin toate cursurile de pe site-ul Universității și am ieșit cu o înțelegere destul de clară a cadrului. Ei au, de asemenea, integrare cu alte biblioteci, cum ar fi Angular, dar nu am avut timp să mă scufund în asta încă.
Apoi, am făcut clic pe link-ul din colțul din dreapta sus al paginii pentru a descărca pachetul de ghiduri și două proiecte de exemplu. Acest lucru este diferit de ceea ce se găsește pe pagina lor GitHub.
Am deschis-o celebru-starter kit- și navigați la / de referință tutoriale și a găsit foldere pentru / slideshow și /timbru. Slideshow-ul este destul de inteligent; el captează imagini de la Picasa și le atrage pe ecran ca și cum ar veni proaspete de la o cameră Polaroid. Puteți găsi o versiune live a acestui lucru pe site-ul meu.
Din cutie, cu toate acestea, nu a funcționat.
În curând mi-am dat seama ce a fost problema. Proba lor a indicat spre o adresă URL Picasa nevalidă. Au trecut mai mult de șase luni de la lansarea eșantionului, așa că sper că va fi corectat până acum, deoarece mi-aș fi închipuit că ar fi un amortizor pentru un număr de oameni care învață să folosească acest cadru fantastic.
Odată ce am schimbat adresa URL din fișierul SlideData.js, totul a fost bine. Ceea ce face proiectul este să capturați imagini dintr-un album Picasa și să le atrageți la ecran. Cu fiecare clic, camera scade imaginea curentă, iar cea proaspătă este scos din fața camerei și este expusă rapid în fața ochilor dvs., împreună cu o anumită fizică plăcută aplicată la înclinarea spate a imaginii. Instrucțiunile pas cu pas pentru crearea acestui proiect pot fi găsite pe site-ul Famo.us.
Există un alt proiect în /timbru dar nu am reușit nici să lucrez la asta. Puteți găsi tutorialul asociat pe site-ul Famo.us, totuși, și cel puțin mergeți prin procesul de a-l construi singur.
Nu voi petrece prea mult timp sa intru in detaliile Famo.us aici, dar daca vreti cu adevarat sa va aruncati mai adanc, exista un articol despre Mediu care ofera o imagine de ansamblu.
De pe site-ul Famo.us:
Interacțiunea cu DOM este plină de probleme de performanță. Famo.us abstractează administrarea DOM [...] Dacă inspectați un site Web care rulează Famo.us, veți observa că DOM este foarte plat: majoritatea elementelor sunt frați unul față de altul. [...] Dezvoltatorii sunt obișnuiți să instaleze elemente HTML pentru că asta e modalitatea de a obține poziționarea relativă, barbotarea evenimentelor și structura semantică. Cu toate acestea, există costuri pentru fiecare dintre acestea: poziționarea relativă determină o revenire lentă a paginilor în animarea conținutului; bâzâitul evenimentului este costisitor atunci când propagarea evenimentului nu este gestionată cu grijă; și structura semantică nu este bine separată de redarea vizuală în HTML. Famo.us promite o experiență bogată de 60 FPS și, pentru a face acest lucru, trebuie să evităm aceste ineficiențe.
Prin utilizarea primitivei CSS3 -webkit-transform: matrix3d, împreună cu accelerația hardware pe care o oferă, putem obține performanțe mult mai mari decât am putea, dacă am fi făcut doar cu DOM. De fiecare dată când atingi DOM, este scump. Nicole Sullivan, o companie de webdesign fantastică cunoscută pentru lucrarea sa CSS, oferă o explicație excelentă despre reluări și revopsire în interiorul browserului și cum putem evita aceste probleme. Din fericire, Famo.us abstractează toate acestea departe de noi.
Mai degrabă decât să scriem un cod HTML, tot Codul nostru Famo.us se va face în JavaScript. Aruncati o privire la cateva mostre pe CodePen pentru a obtine o buna intelegere pentru cat de putin HTML scrieti (nici unul) si cum arata JavaScript. Într-un tutorial viitoare, mă voi arunca mult mai mult în profunzime cu Famo.us decât eu fac aici.
Acum vorbim limba mea! Unele aplicații de înaltă performanță în browser!
Procesul de instalare pentru ManifoldJS este destul de simplu. Consultați pagina GitHub pentru mai multe informații. Jeff Burtoft vă propune, de asemenea, procesul de creare a unei aplicații web găzduite la ThisHereWeb.com.
Acest proiect va continua să evolueze în următoarele luni. Numai în ultima săptămână am văzut mai multe adăugiri. Pe platformele care suportă nativ aplicații web, cum ar fi Windows 10, Chrome OS și Firefox OS, ManifoldJS va crea pachete native. Pe platforme precum iOS și Android, se folosește Cordova, care permite unui dezvoltator să scrie o aplicație web, dar încă să acceseze multe dintre caracteristicile native ale unui dispozitiv, fie prin Cordova, fie prin comunitatea activă a pluginurilor.
Jeff Burtoft explică foarte bine aplicațiile web găzduite pe blogul său și în recenta lui // BUILD / prezentare. Videoclipul de la // BUILD 2015 prezintă exact ceea ce puteți face cu această tehnologie.
Fac acest tutorial dintr-un MacBook Pro care rulează Yosemite 10.10.3, Visual Studio Code ca IDE-ul meu și MAMP ca server web local. Apoi folosesc Tree-ul sursă ca instrumentul meu Git de alegere și găzduesc codul open-source pe GitHub și voi fi implementat pe iOS prin Xcode.
Știu, un tehnician evanghelist de la Microsoft care utilizează produse Apple și vă spune despre unelte cu sursă deschisă. La ce se apropie lumea?
Primul lucru pe care l-am făcut a fost descărcarea probelor Famo.us de pe site-ul lor. Am făcut modificările corespunzătoare ale fișierului SlideData.js, așa cum am menționat mai sus, pentru ca proiectul meu să poată trage feeduri de la Picasa. Am încărcat-o în GitHub, astfel încât să aveți un eșantion care să funcționeze imediat. Vizualizați site-ul live și mergeți la GitHub pentru a descărca proiectul de lucru.
După aceea, m-am conectat la Azure și am creat un nou site web. Puteți obține credite de încercare Azure în valoare de 200 de dolari sau puteți ajunge la mine cu privire la un membru gratuit al BizSpark pentru dvs. sau pentru demararea dvs., care acordă 150 $ / lună de gazduire web.
Apoi indic acest nou site Azure la replica mea GitHub. Scott Hanselman explică cum se face acest lucru în câțiva pași. De acolo, am Azure să monitorizez replica mea GitHub pentru acest proiect, iar orice schimbări pe care le împing la acel depozit sunt imediat preluate de Azure, iar cele mai recente modificări pot fi vizualizate imediat pe site-ul web și proiectul imediat.
În continuare, trebuie să folosim ManifoldJS pentru a "împacheta" aplicația noastră web, astfel încât să o putem implementa în diferite magazine de aplicații. Firefox și Chrome suportă acest lucru nativ, dar pentru iOS, Android și Windows 8 sau 10, trebuie să utilizăm Cordova. ManifoldJS va genera un fișier manifest de aplicații pentru noi, care are toate informațiile pe care trebuie să le stocheze aplicațiile pentru a merge la proiectul nostru.
Aveți două opțiuni aici: Utilizați generatorul Generator de aplicații web, care va furniza instrucțiuni grafice și instrucțiuni pas cu pas sau le puteți rula prin linia de comandă.
Alternativ, pentru linia de comandă, trebuie să instalați mai întâi ManifoldJS. Asigurați-vă că ați instalat NPM și apoi executați:
npm instalați -g distribuitoare / distribuitoare
Cu mine până acum? Acum putem apela ManifoldJS și să-l genereze un dosar pentru noi cu proiecte pentru fiecare platformă. În terminal am intrat:
ManifoldJS -d / Utilizatori / DaveVoyles / Documents / FamousManifold http://famous-camera-app.azurewebsites.net/final/
Calea următoare -d spune ManifoldJS directorul în care vreau să fie stocat. Curând după aceea, ar trebui să vezi construirea terminalului în fața ochilor.
Navigați la locul unde ați stocat acest proiect și veți găsi o serie de directoare acolo. Apoi am navigat la Cordova / platforme / iOS și a căutat fișierul terminând xcodeproj, așa cum am vrut să testez asta în simulatorul iOS. Faceți dublu clic pe acea pictogramă pentru a deschide proiectul în Xcode.
Și acolo o avem, o aplicație Famo.us care rulează în interiorul lui Cordova pe iOS.
Am de gând să încerc Angular + Famo.us într-unul din demo-urile mele viitoare, precum și să împachetez că în ManifoldJS pentru a testa performanța pe iOS. Dacă doriți să depanați aceste aplicații, vă recomandăm să vă uitați la VorlonJS? Este platformă agnostică, durează un minut pentru a configura, iar în link-ul de mai sus, ilustrez modul în care pot testa aplicațiile pe un browser desktop, precum și pe dispozitivele mobile.
Mi-ar plăcea foarte mult să testați ce tip de browsere mobile sunt capabile atunci când combinați un cadru precum Famo.us și Cordova, deci căutați un eșantion care să implice aceste două în curând. Pe măsură ce webul continuă să evolueze, Microsoft va continua să actualizeze site-ul dev.modern.ie/platform/status/ pentru a reflecta modificările noului browser Edge. Cel mai interesant anunț pentru mine, totuși, este schimbarea recentă de la "în dezvoltare" la "în margine" tag pentru asm.js. În curând vom putea rula aplicații native în browser. Este un moment interesant de a lucra pe web.
S-ar putea să vă surprindă un pic, dar Microsoft are o grămadă de învățare gratuită pe multe subiecte JavaScript open-source și suntem într-o misiune de a crea mult mai mult cu Microsoft Edge.
Iată câteva resurse excelente de la echipa și colegii mei:
Și câteva instrumente gratuite pentru a începe: Visual Studio Code, Azure Trial și instrumente de testare cross-browser - toate disponibile pentru Mac, Linux sau Windows.
Acest articol face parte din seriile de tehnologie web dev din Microsoft. Suntem încântați să împărtășim Microsoft Edge și noul EdgeHTML motor de randare cu tine. Obțineți mașini virtuale gratuite sau testați de la distanță pe dispozitivele Mac, iOS, Android sau Windows @ http://dev.modern.ie/.
Accentsconagua