Laurentiu macovei meteor. a better way of building apps
•Download as PPTX, PDF•
1 like•320 views
CodeCampIasi25Oct2014
![A better way
to build apps.
Laurențiu Macovei
DotNetWise
[25th of October 2014]](https://image.slidesharecdn.com/laurentiumacovei-meteor-141120132020-conversion-gate01/85/laurentiu-macovei-meteor-a-better-way-of-building-apps-1-320.jpg)
![A better way
to build apps.
Laurențiu Macovei
DotNetWise
[25th of October 2014]](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Similar to Laurentiu macovei meteor. a better way of building apps
Similar to Laurentiu macovei meteor. a better way of building apps (20)
More from Codecamp Romania
More from Codecamp Romania (20)
Recently uploaded
Recently uploaded (20)
Laurentiu macovei meteor. a better way of building apps
- 1. A better way to build apps. Laurențiu Macovei DotNetWise [25th of October 2014]
- 2. A better way to build apps. Laurențiu Macovei DotNetWise [25th of October 2014]
- 4. Agenda Where we are today Principles of Meteor Demo
- 5. NOVEMBER 6, 2014 Worldwide Meteor Day A welcome party in your own city, hosted by Meteor developers all around the world. http://meteorday.com/
- 6. So what is Meteor anyways?
- 7. Meteor = Code + Community Meteor is an open source full stack framework that makes reactive real time applications really easy to build
- 8. Meteor = Code + Community Community is organizing people to accomplish great things Monthly Meteor Devshop is held in San Francisco and London (http://goo.gl/mWhWZC)
- 9. Today? Where are we?
- 10. 6 nov 2011 the first commit of Meteor 11340 commits ever since
- 11. Knockout JS Durandal JS Derby http://code.tutsplus.com/tutorials/important-considerations-when-building-single-page-web-apps--net-29356
- 12. Knockout JS Durandal JS Derby XML / REST / SOAP / POX / JSON / JSV / ...
- 13. XML / REST / SOAP / POX / JSON / JSV / ... Reactive Knockout JS Durandal JS Derby
- 14. Rective programming A programming paradigm oriented around data flows and the propagation of change.
- 16. Meteor Roadmap: 0.9.4 today 1.0 will be released on 6th Nov Under consideration for 1.1+ Native Windows support Until then you can use vagrant https://github.com/shoebappa/vagrant-meteor-windows Other databases support than MongoDB roadmap.meteor.com
- 17. Stargazers (as of 14 oct 2014) Reactive D:WorkCodecamp2014CoffeesScript.png Reactive
- 18. 000 Funding ...not only has a team of dedicated and capable engineers with a vision for changing the world (nearly every team has that), but it also has a lovely bank account: $11.2 million in funding (hardly any team has that) http://goo.gl/Gnfcww
- 19. Nine principles of Meteor 1. One language 2. Simplicity === Productivity 3. Data on the Wire 4. Database Everywhere 5. Latency Compensation 6. Hot Code Pushes 7. Embrace the Ecosystem 8. Interoperability 9. Smart packages 10. Full Stack Reactivity
- 20. Nine principles of Meteor 1. One language 2. Simplicity === Productivity 3. Data on the Wire 4. Database Everywhere 5. Latency Compensation 6. Hot Code Pushes 7. Embrace the Ecosystem 8. Interoperability 9. Smart packages 10. Full Stack Reactivity
- 21. 001 Pure Javascript Write your entire app in pure JavaScript.
- 23. 001 Pure Javascript All the same APIs are available on the client and the server — including database APIs!
- 24. 001 Pure Javascript All the same APIs are available on the client and the server — including database APIs!
- 25. 001 Pure Javascript All the same APIs are available on the client and the server — including database APIs!
- 26. 001 Traditional Stack vs Pure Javascript Client HTML, CSS, Javascript Server Programming Language, Database Access, Marshalling Language
- 27. 001 Traditional Stack vs Pure Javascript Client HTML, CSS, Javascript Server Programming Language, Database Access, Marshalling Language
- 28. 001 Meteor Stack embraces Pure Javascript Client HTML, CSS, Javascript, MiniMongo Server Javascript, Mongo
- 29. 001 Pure Javascript https://meteorhacks.com/introduction-to-ddp.html
- 30. 001 Pure Javascript Even MongoDB stores JSON documents and uses Javascript syntax to query, insert, update and delete data
- 31. 002 Simplicity === Productivity One command to create an app meteor create awesome
- 32. 002 Simplicity === Productivity One command to locally run your app meteor
- 33. 002 Simplicity === Productivity One command to compile your entire application into a fully self-contained bundle meteor build
- 34. 002 Simplicity === Productivity One command to deploy your app into the cloud meteor deploy awesome -> http://awesome.meteor.com
- 35. 002 Simplicity === Productivity One command to run on premises: Unpack it anywhere there's node.js forever start bundle/main.js
- 36. 003 Data on the Wire. Live page updates. „Apps need Templates, Templates need DATA”
- 37. 003 Live page updates „Apps need Templates, Templates need DATA” Just write your templates.
- 38. 003 Data on the wire. They automatically update when data in the database changes
- 39. 003 Data on the wire. Supports any templating language. (But as of 0.9.4 only ships with Blaze)
- 40. 003 Data on the wire. Supports any templating language. (But as of 0.9.4 only ships with Blaze) Jade, Knockout and Famo.us are community supported.
- 41. 003 Data on the wire. Live page updates – KO example
- 42. 004 Database Everywhere. Clean, powerful data synchronization. Write your client code as if it were running on the server and had direct access to the database.
- 43. 004 Database Everywhere. Write your client code as if it were running on the server and had direct access to the database.
- 44. 004 Database Everywhere. Publish / Subscribe mechanism
- 45. 004 Database Everywhere. Publish / Subscribe mechanism
- 46. 004 Database Everywhere. Publish / Subscribe mechanism
- 47. 004 Database Everywhere. Publish / Subscribe mechanism
- 48. 004 Database Everywhere. The code itself is your API. No more loading your data from REST endpoints.
- 49. 005 Latency compensation. When a user makes a change, their screen updates immediately — no waiting for the server.
- 50. 005 Latency compensation. In a traditional app, the client does an action and waits for the server to respond. Wait time increases gradually with the server load. Traditional
- 51. 005 Latency compensation. When a user makes a change, their screen updates immediately — no waiting for the server. With latency Traditional compensation
- 52. 005 Latency compensation. If the server rejects their request –or– executes it differently The client is patched up with what actually happened.
- 53. 006 Hot Code Pushes. Update your app while users are connected without disturbing them.
- 54. 006 Hot Code Pushes. When you push a new version, the new code is seamlessly injected into each browser frame in which the app is open.
- 55. 006 Hot Code Pushes. Supports mobile platforms too with Cordova / Phonegap: meteor add platform android meteor add platform ios
- 56. 006 Hot Code Pushes. Yes! Apple allows hot code pushes in IOS & AppStore. Although, LocalStorage is limited to 5MB!
- 57. 007 Embrace the Ecosystem. Meteor is open source and integrates, rather than replaces, existing open source tools and frameworks.
- 58. 007 Embrace the Ecosystem. Meteor integrates with: open source popular examples: Angular https://medium.com/@zfxuan/the-wonderful-duo-using-meteor-and-angularjs-together-4d603a4651bf Famo.us https://www.youtube.com/watch?v=bmd-cXSGQAA Polymer https://github.com/ecwyne/meteor-polymer officially: Velocity – Unit Testing for Meteor using jasmine mocha selenium
- 59. 008 Interoperability. You can connect anything to Meteor, from native mobile apps to legacy databases to Arduinos. Just implement the simple DDP (Distributed Data Protocol). http://www.meteorpedia.com/read/DDP_Clients
- 60. 009 Smart Packages. Meteor's Smart Packages are actually little programs that can inject code into the client or the server, or even hook into the bundler to preprocess your source. https://atmospherejs.com meteor add iron:router Some examples: iron:router accounts-ui less spiderable – enable SEO to your site
- 62. Resources Beginners discovermeteor.com Best meteor resources I’ve found Meteor Tips 30 Days with Meteor Discover Meteor Meteor Hacks Gentlenode meteor.hackpad.com yauh.de javascriptissexy.com andrewscala.com/meteor meteortuts.com differential.io Meteor cookbook Meteor Academy
- 63. Is it a better way to build apps? 1. Your applications are real-time by default. 2. You can develop with just one language. 3. The community is extremely supportive.
- 64. Is it a better way to build apps? 4. You can save a lot of time with smart packages. 5. It’s optimized for developer happiness. 6. It’s friendly to beginner developers. 7. It’s ahead of the tech curve.
- 65. Q & A The End of Dinosaurs happened because of [a] Meteor See you @Meteor Devshop on 6th Nov meetup.com/Meteor-Iasi
- 67. kadira.io
Editor's Notes
- Salut, Sunt Laurenţiu şi vreau să vă vorbesc despre un nou mod de a creea aplicaţii. Aş vrea să descoperim împreună dacă este un mod mai bun de a construii aplicaţii. Acest slide este puţin incorect deoarece Meteor nu este un mod „static”, ci unul „dinamic”
- Acum că am fixat bug-ul să trecem la treabă.
- Astăzi vom arunca o privire de ansablu asupra - Unde suntem Câteva principii din Meteor
- Pe 6 noiembrie sărbătorim ziua internaţională METEOR. Programatori din toată lumea se întâlnesc în oraşele lor şi îşi împărtăşesc cunoştinţe şi experienţe legate de METEOR. Vă aştept atunci începând cu ora 18:30 la sediul MAXCODE.
- Bun, dar totuşi ce este Meteor până la urmă?
- Pe scurt Meteor egal Cod + Comunitate Meteor este o platformă completă, open source, cu ajutorul căreia putem să facem aplicaţii care se actualizează în timp real şi care sunt uşor de construit
- Comunitatea este foarte importantă pentru orice proiect. Fără comunitate, sunt şanse minime ca acesta să fie adoptat. Cei de la Meteor au înţeles asta şi din 2013, în fiecare lună se organizează întâlniri cu oamenii din comunitate, unde fiecare vine să-şi împărtăsească experienţele. DevShop-ul oficial are loc în San Francisco, însă această mişcare a fost preluată de comunităţile din mai multe oraşe. Pe viitor, dacă există interes în comunitatea Ieşeană dorim şa avem şi noi un astfel de eveniment.
- Aşdar, unde suntem astăz?
- În mare, cam pe aici Pe 6 noiembrie 2011 a fost publicat prima bucăţică de cod Meteor. Cam tot prin acea perioadă au apărut şi multe framework-uri în partea de client/javascript.
- Acuma din punct de vedere al ceea ce oferă aceste framework-uri, am ales câteva şi am încercat să le organizez. În stânga avem cele care nu oferă DataBinding, Apoi unele care oferă Two-Way data binding Apoi mai adăguă funcţionalităţi necesare aplicaţiilor: rute pe client, form handling etc. Aceste framewokr-uri există doar în partea de client. Meteor este un „full stack framework” adică coexistă atât pe client cât şi pe server. El ne oferă –end-to-end persistence– adică atât în colectarea datelor pe client cât şi trimiterea şi salvarea lor în baza de date.
- Aceste framework-uri de pe client ştiu să consume XML, REST, SOAP, JSON etc. Însă le lipseşte ceva. Un premiu pentru cine poate să ne spună ce anume?
- Desigur partea de Reactivity. În speţă, dacă datele se modifică pe server în baza de date, clienţii habar nu au până când se duc manual şi mai dau un click sau un refresh în browser. În afară de Meteor mai există şi alte framework-uri reactive, aici am puea menţiona Derby.
- Motivul pentru care Derby era puţin mai în spate, este vizibil în această comparaţie. În stânga avem cele mai elocvente framework-uri dintre cele de mai înainte. Pentru a înţelege amploarea acestor numere, în dreapta avem spre comparaţie câteva proiecte open source care nu sunt framework-uri. Spre exemplu, Angular este cel mai popular framework pentru partea de client. Este aproape la fel de popular ca jQuery sau Node. Însă nici Meteor nu este departe. În contrast, Twitter Bootstrap, Node şi jQuery sunt librăriile cu cele mai multe aprecieri pe Github.
- Majoritatea proiectelor open source au parte de o echipă solidă de ingineri însă tot majoritatea lor nu au parte de o finanţare serioasă. Meteor anunţa în 2012 că au reuşit să obţină finanţare de 11.2 milioane de doari!
- Acum că tot au pus dolarii la treabă, să discutăm despre principiile Meteor
- Acum că tot au pus dolarii la treabă, să discutăm despre principiile Meteor
- Scriem codul în Javascript, atât pe client cât şi pe server.
- Cum am spune noi Moldovenii: Javascript Javascript pisti tăt
- Aceleaşi bucăţi de cod pot fi disponibile atât pe client cât şi pe server
- .. Incluzând apelurile către baza de date. Spre exemplu: folosim exact acelaşi cod pentru a expune/accesa colecţia de „post-uri”
- şi exact acelaşi cod pentru a insera un post, fie de pe server fie de pe client.
- Un exemplu clasic poate fi, dintr-o bază de date relaţională, extragem rânduri şi coloane, le convertim în entităţi logice şi apoi le serializăm în JSON, XML etc.
- Un exemplu clasic poate fi, dintr-o bază de date relaţională, extragem rânduri şi coloane, le convertim în entităţi logice şi apoi le serializăm în JSON, XML etc.
- Acum să vedem cum ne ajută Meteor folosind acelaşi limbaj peste tot: Pe client scriem tot HTML, CSS şi Javascript însă acum avem access direct şi la baza de date folosind MiniMongo. Pe partea de server, codul este scris în Javascript şi datele sunt salvate în baza de date Mongo. În acest fel putem corela şi reutiliza codul de pe client la de pe server – un exemplu ar putea fi adăugarea validatorilor - acest cod este identic atât pe client cât şi pe server. MiniMongo este un API care este iarăşi un exemplu de cod care poate fi folosit atât pe client cât şi pe server. El se mulează exact peste sintaxa MongoDB.
- Dacă am diseca codul aplicaţiei noastre ar arăta cam aşa. Pe server codul rulează în Node Pe client avem HTML şi CSS Iar ambele împreună folosesc javascript şi au access la API-ul Meteor, MiniMongo şi protocolul DDP (Distributed Data Protocol) Eu nu am să intru în detalii despre DDP dar puteţi afla mai multe la acest link
- Vorbeam de MiniMongo că este cod javascript care ne ajută să aducem, inserăm, edităm sau ştergem date dintr-o bază de date MongoDB. Dar însăşi MongoDB este o bază de date care stochează documente JSON şi sintaxa acestuia este javascript (Mongo shell).
- Gata cu Javascript-ul, să trecem la principiul nr 2 Aplicaţiile au nevoie de (şabloane) template-uri. Template-urile au nevoie de date.
- În Meteor template-urile sunt declarative. Un exemplu: Aici, în body apelăm (sau randăm) template-ul myCoolTemplate, care va afişa un paragraf cu textul Hello world.
- În acest exemplu folosim o proprietate numită firstName. Dacă aceasta a fost populată dintr-un cursor miniMongo, template-ul aferent va fi automat actualizat când în altă parte a aplicaţiei cineva o actualizează folosind spre exemplu codul de mai sus.
- Într-o aplicaţie tradiţională, când utilizatorul face o acţiune, el trebuie să aştepte ca cererea să fie procesată de server înainte ca schimbările să se reflecte în interfaţă.
- Când utilizatorul adaugă spre exemplu un nou post, un request este iniţiat către server. Serverul va procesa cererea va insera o înregistrare în baza de date şi va răspunde utilizatorului care este noua pagină. Abia atunci utilizatorul va fi redirecţionat la noua pagină.
- Într-o aplicaţie meteor, utilizatorul nu trebuie să mai aştepte. Rezultatul acţiunii se reflectă în browser imediat. Cănd utilizatorul adaugă un post, acesta va vedea instant noua pagină postată. Meteor va detecta schimbările în partea de client şi le va trimite serverului. Server-ul va procesa adăugarea postului şi va răspunde cu „soluţionarea rezultatului”. De cele mai multe ori ce a trimis clientul este la fel cu ce va răspunde serverul, însă uneori serverul poate completa câmpuri adiţionale la adăugarea postului.