Simple todo app with meteor

Apr 15, 20140 likes1,462 views

Meteor is a full-stack JavaScript framework that allows developers to build web applications quickly using a single programming language. It includes a development environment to build the app, a database (MongoDB), and communication protocols (DDP) to connect the client and server. The document demonstrates a simple Todo app built with Meteor that allows users to create, update, and mark tasks as complete. Templates are used to display tasks and counts, while events and helpers interact with the Tasks collection in MongoDB to add, update, and filter data.

TodoAppwith Meteor
» Long Nguyen
» @vangnol

Whatis Meteor?
Meteor is a framework for building incredible web
application. Meteor helps you build complex web
application but in minimal amount of time. It's full-
stack framework. On the server it runs on Nodejs,
which means Meteor written in Javascript. Meteor has
out of the box integration with MongoDB database.
Meteor uses DDP Protocal to communicate between
client and server.

Setup
» MacOS or Ubuntu
curl https://install.meteor.com/ | sh
» Windows
Go get a Mac or a Ubuntu laptop

task.html
<head>
<title>Simple Todo App</title>
</head>
<body>
<h1>Awesome Todo App</h1>
<hr/>
<div class="container">
{{> CreateTask}}
{{> ListTasks}}
{{> CompleteCounter}}
</div>
</body>
<template name="ListTasks">
<ul>
{{#each tasks}}
<li class="task {{doneClass}}">{{> Task}}</li>
{{/each}}
</ul>
</template>

$<template name="Task"> <input type="checkbox" name="is_done" {{isDoneChecked}} /> {{subject}} </template> <template name="CreateTask"> <form class="create-task" > <input type="text" placeholder="Creating new task...!" /> </form> </template> <template name="CompleteCounter"> <h3>{{completeTask}} / {{totalTasks}} tasks completed</h3> </template>$

task.css
.task{
font-size: 20px;
background-color: #EBEBEB;
padding: 10px;
margin-bottom: 2px;
}
.done{
text-decoration: line-through;
}

$task.js Todos = new Meteor.Collection('todos'); if(Meteor.isClient){ Template.ListTasks.helpers({ tasks: function(){ return Todos.ﬁnd(); }, doneClass: function(){ return this.is_done ? 'done' : ''; } }); Template.Task.helpers({ isDoneChecked: function(){ return this.is_done ? 'checked' : '' } });$

$Template.Task.events({ "click [name=is_done]": function(e, tmpl){ var id = this._id; var isDone = tmpl.find('input').checked; Todos.update({_id: id}, {$set: { is_done: isDone}}); } }); Template.CreateTask.events({ 'submit form': function(e, tmpl){ e.preventDefault(); var subject = tmpl.find('input').value; Todos.insert({subject: subject, created_at: new Date, is_done: false}); var form = tmpl.find('form'); form.reset(); } }); }$

$Template.CompleteCounter.helpers({ completeTask: function(){ return Todos.ﬁnd({is_done: true}).count(); }, totalTasks: function(){ return Todos.ﬁnd({}).count(); } }); } if(Meteor.isServer){ }$

References
» MeteorHacks
» Best Learning Resources
» Meteor Packages
» Why Meteor will kill Ruby on Rails
» Meteor Won’t Kill Rails Anytime Soon
» How to Learn JavaScript Properly

This document provides an introduction and overview of ReactJS. It discusses that React is a JavaScript library developed by Facebook and Instagram for building user interfaces. It introduces key React concepts like components, props, state, lifecycles, and differences between imperative and declarative programming. It also covers setting up a basic React project using tools like Webpack and Babel and references additional React resources.

Introduction to ReactJs & fundamentalswebsyndicate

W3C Web Performance - A detailed overviewAlois Reitbauer

The document discusses web performance optimization techniques. It introduces tools in the Navigation Timing and Resource Timing APIs to measure page load times and resource loading speeds. It presents methods to instrument pages to measure parts of the loading process. The document also discusses upcoming web performance APIs like Beacon, Navigation Timing 2, and ways to prioritize visible resources. Polyfilling techniques are mentioned to bring these capabilities to older browsers. Real-world uses are discussed, like CDN monitoring and integrating performance data with analytics.

Breaking the Server-Client Divide with Node.js and ReactDejan Glozic

Rendering Web applications server or client side has been a war for years, with server side proponents citing 'speed to glass' and SEO, and client side boasting speed of transitions after the upfront cost, and desktop-like application feel. For a while it was necessary to pick sides, that is until React. In this talk, I will show a stack we are using in IBM Cloud Data Services that uses Node.js and React to bring the best of both worlds in isomorphic apps. Server or client? Yes!

Building high-performance web applications with PreactMaurice De Beijer [MVP]

The document discusses building high performance web applications with Preact. It introduces Preact as a fast and lightweight alternative to React, highlighting its small file size and ability to run React components with minimal changes. It also covers the PRPL pattern for progressive web apps, which pushes critical resources, renders the initial route, pre-caches remaining routes, and lazily loads remaining routes for optimal performance.

ReactJS.NET - Fast and Scalable Single Page ApplicationsRick Beerendonk

Introducing Facebook's React and ReactJS.NET @ Microsoft's TechDays 2015 in The Netherlands. Is the HTML of your SPA also filled with unmaintainable semi code? Is data binding performance causing you headaches? Don’t you remember how data finds its way to the UI? Let's React! There is a new functional approach to tackle traditional complexities in JavaScript: ReactJS (open source). Maligned in 2013, embraced in 2015 by the largest websites in the world. Let's build fast components in a lasting and meaningful way. This session is a full introduction to the React JavaScript library, its virtual DOM and synthetic events. ReactJS.NET for ASP.NET MVC (and OWIN) will be covered as well. With ReactJS.NET your app starts with a server side rendered page, ideal for search engine optimization (SEO). Does your page need to work under IE8? No problem! The best part: You do not have to build your entire site with ReactJS, but you can start with any parts you like. Afterwards this talk you can immediately apply React in your daily work. See http://reactjs.net and http://reactjs.com

React for .net developersmacsdickinson

This document introduces React for .NET developers. It provides a brief history of web development in .NET and discusses how React addresses the needs of modern users and developers. The core concepts of React like components, JSX, top-down data flow, and the virtual DOM are explained. ReactJS.NET is introduced as a way to use React with ASP.NET MVC. In summary, React provides fast load times, rich client functionality, and testable code while having a short learning curve and enabling reusability.

Train screensVenkat Projects

output screens, project output, python projects, machinelearning projects, data science projects, Artificial Intelegance projects, support vector machine, ramdom forest tree, Dession tree, linear Regression, logistic regression, Feature Selection, Naive Bayes, Machine learning Algorithms, Dimensionality Reduction Algorithms, Gradient Boosting algorithm, Logistic Regression, TensorFlow,Scikit-Learn,Numpy,Keras,PyTorch ,LightGBM, Eli5 ,SciPy,Theano,Pandas,imageProcessing Deep Learning,

Robust web apps with React.jsMax Klymyshyn

This document discusses building robust apps with React.js by avoiding tightly coupled components and focusing on proper data flow. It introduces React.js basics like components, JSX, virtual DOM and one-way data flow. It also covers Flux architecture with unidirectional data flow through stores, dispatcher and actions. The conclusion emphasizes that React.js is about understanding data flow in the app to reduce mistakes and increase immutability.

Getting started with node JSHamdi Hmidi

This document discusses API driven applications using the MEAN stack. It provides an overview of Node.js, explaining that it is a JavaScript runtime environment for server-side applications. It also introduces MongoDB, describing it as a NoSQL database that stores data in JSON-like documents rather than tables. The document then covers basic CRUD operations in MongoDB using Mongoose and building RESTful APIs with Express.js to interact with the MongoDB database from a Node.js backend.

Meteor Day Athens (2014-11-07)svub

GatlingTengwen Wang

Qtp Tutorial 4 Recording Of Tests In Qtp With Drag And Drop Web ElementsYogindernath Gupta

QTP does not record web drag and drop events by default. The document provides instructions to configure QTP to capture these events by modifying an XML file to include the ondragstart and ondrop events. It then explains that when recording a test, QTP will capture the drag and drop events in the test code. It also notes that if drag and drop code uses JavaScript to pass clipboard data, the code may need to be modified to use window.clipboardData instead of window.event.dataTransfer.

IBM and Node.js - Old Doge, New TricksDejan Glozic

The document discusses IBM's transition from older enterprise stacks like Java and SQL to newer technologies like Node.js, NoSQL, and microservices. It describes motivations for the change like yearly release cycles, large teams, and running products on-premise. It then covers specifics of the transition, including moving from Dojo/Dijit to jQuery/Bootstrap on the client side, using Node.js and WebSockets for real-time updates, adopting a microservices architecture, switching from SQL to NoSQL databases, and addressing challenges that arise from the new approaches.

Introduction to ReactJSHoang Long

This document introduces ReactJS, a JavaScript library for building user interfaces. It discusses key React concepts like the virtual DOM, which is a JavaScript representation of real DOM elements that allows React to efficiently update the real DOM by comparing it to a new virtual DOM. It also covers one-way data binding in React, where data flows from parent to child components through props, while events flow in the opposite direction. Finally, it emphasizes that in React, everything is a component, and components manage their own state and receive immutable props from parent components.

Web Development with NodeJSRiza Fahmi

This document discusses the basics of web application architecture using Node.js and Express. It introduces HTTP requests and responses between clients and servers, and common status codes and verbs like GET and POST. It explains how to create a basic server with the HTTP module in Node.js, and how Express simplifies this with routing, middleware, request/response extensions and view handling capabilities. Specific examples are given for creating routes, using middleware, and setting up a view engine like Handlebars to render templates.

React JS - IntroductionSergey Romaneko

React is a JavaScript library created by Facebook and Instagram to build user interfaces. It allows developers to create fast user interfaces easily through components. React uses a virtual DOM to update the real DOM efficiently. Some major companies that use React include Facebook, Yahoo!, Airbnb, and Instagram. React is not a complete framework but rather just handles the view layer. It uses a one-way data binding model and components to build user interfaces.

007. Redux middlewaresBinh Quan Duc

This document discusses ReactJS Redux middleware. It explains that middleware allows you to extend Redux with custom functionality. Redux Thunk is mentioned as a middleware that lets you write action creators that return functions, to delay or conditionally dispatch actions. It also discusses using Axios and Redux-api together to make API calls from Redux actions and handle asynchronous logic. The document provides code examples of implementing middleware, making requests with Axios, and configuring Redux-api for API integration.

HTML5Cuelogic Technologies Pvt. Ltd.

The document discusses new features in HTML5 including magical form elements, local storage, local databases, web workers, and geolocation. It provides examples and links to demonstrate magical form elements that save time and resources, how to set and get values from local storage, using a local database with queries, running non-blocking code with web workers, and accessing geolocation data. The author thanks the reader and provides links to working examples on their website.

JavaScript innovaties: ECMAScript 6 & 7Rick Beerendonk

[Dutch] In juni is ECMAScript 6 definitief. Laten we alle vernieuwingen eens op een rij zetten middels sprekende voorbeelden en demos: Scope, const, destructuring, arrow functions, map, set, modules, classes, etc. Tevens behandelen we mogelijkheden om ECMAScript 6 code om te zetten naar versie 5, zodat de code ook uitvoerbaar is in oudere omgevingen. ES6 browser ondersteuning in bijvoorbeeld Windows 10’s Internet Explorer is er al gedeeltelijk, maar vereisen soms wat extra instellingen. We behandelen welke. Ook de Visual Studio ondersteuning wordt bekeken. Tot slot een vooruitblik op ECMAScript 7.

Brad wood - Integrating MVC Into Legacy [Into The Box 2020]Ortus Solutions, Corp

Building time machine with .net core Alper Hankendi

This document summarizes a presentation about building a time machine using .NET Core and event sourcing. The presentation covers getting started with event sourcing, the history and concepts of event sourcing like commands, events, aggregates and projections. It also demonstrates a banking example and addresses challenges like replaying large numbers of events through rolling snapshots and fixing past issues by adding new events. The presentation aims to explain how to use event sourcing to build scalable and asynchronous applications that can rebuild state from immutable event records.

Introduction to ReactJSJarosław Jaryszew

This document provides an introduction to ReactJS, including what ReactJS is, its key features like the virtual DOM and JSX, and how to get started with ReactJS. It was created by Facebook to address performance issues with heavy DOM manipulation. The document discusses ReactJS's use of a virtual DOM for efficient re-rendering, JSX for mixing HTML into JavaScript, resources for learning ReactJS, and ways to set up a ReactJS environment including common build tools. It also briefly describes an example company that uses ReactJS for mobile payments and is hiring developers.

Introduction to ReactJSTu Hoang

React, Flux and more (p1)tuanpa206

This document provides an overview of several core technologies used in React applications, including React, Flux, Node.js, Browserify, and Gulp. It discusses that React is a JavaScript library for building user interfaces and rendering UI as HTML. It uses virtual DOM for efficient updates. Flux is an architecture for uni-directional data flow. Node.js is used for server-side JavaScript with npm. Browserify allows using Node modules in the browser. Gulp is a build system for tasks like bundling files.

Enterprise level application in 5 minAustin Gil

Wicket Live on StageMartijn Dashorst

Wicket Live on Stage features a Wicket project that has been in production use for over a year. The application is a web application for dutch highschools for administration of students' data for funding, guidance, graduation, attendance and financial purposes. The presentation describes the road to choosing Wicket as the core framework, and includes screenshots of the live demo (which isn't captured in this presentation) of Vocus (http://www.vocuslis.nl).

JavaScript Roadmap - DOM ManipulationAswin Barath

AWS Summit Berlin 2013 - Keynote - 6wunderkinderAWS Germany

This document discusses the challenges faced by Wunderlist, a to-do list app, in scaling up to support millions of users. It grew rapidly but encountered performance issues due to its monolithic architecture. The document advocates adopting an approach using AWS that embraces small, independent components, continuous measurement and improvement, and fearless changes to infrastructure in order to build systems that can dynamically scale and remain resilient.

Nano Goals AppCarlos Medina Cano

This document summarizes the market research and development plans for a productivity app called Nano Goals App. Originally conceived as a to-do list app incorporating goals and habits, market research found competition in the general productivity app space. However, there was potential in developing the app for professional use, drawing from literature on business management. The revised plan is to base the app methodologically on "The Seven Habits of Highly Effective People" and help users achieve small, predefined goals related to each habit in pursuit of larger objectives, inspired by Kaizen philosophy. The app will have both mobile and web versions for use at work.

More Related Content

What's hot (20)

Robust web apps with React.jsMax Klymyshyn

Getting started with node JSHamdi Hmidi

Meteor Day Athens (2014-11-07)svub

GatlingTengwen Wang

Qtp Tutorial 4 Recording Of Tests In Qtp With Drag And Drop Web ElementsYogindernath Gupta

IBM and Node.js - Old Doge, New TricksDejan Glozic

Introduction to ReactJSHoang Long

Web Development with NodeJSRiza Fahmi

React JS - IntroductionSergey Romaneko

007. Redux middlewaresBinh Quan Duc

HTML5Cuelogic Technologies Pvt. Ltd.

JavaScript innovaties: ECMAScript 6 & 7Rick Beerendonk

Brad wood - Integrating MVC Into Legacy [Into The Box 2020]Ortus Solutions, Corp

Building time machine with .net core Alper Hankendi

Introduction to ReactJSJarosław Jaryszew

Introduction to ReactJSTu Hoang

React, Flux and more (p1)tuanpa206

Enterprise level application in 5 minAustin Gil

Wicket Live on StageMartijn Dashorst

JavaScript Roadmap - DOM ManipulationAswin Barath

Robust web apps with React.jsMax Klymyshyn

Getting started with node JSHamdi Hmidi

Meteor Day Athens (2014-11-07)svub

GatlingTengwen Wang

Qtp Tutorial 4 Recording Of Tests In Qtp With Drag And Drop Web ElementsYogindernath Gupta

IBM and Node.js - Old Doge, New TricksDejan Glozic

Introduction to ReactJSHoang Long

Web Development with NodeJSRiza Fahmi

React JS - IntroductionSergey Romaneko

007. Redux middlewaresBinh Quan Duc

HTML5Cuelogic Technologies Pvt. Ltd.

JavaScript innovaties: ECMAScript 6 & 7Rick Beerendonk

Brad wood - Integrating MVC Into Legacy [Into The Box 2020]Ortus Solutions, Corp

Building time machine with .net core Alper Hankendi

Introduction to ReactJSJarosław Jaryszew

Introduction to ReactJSTu Hoang

React, Flux and more (p1)tuanpa206

Enterprise level application in 5 minAustin Gil

Wicket Live on StageMartijn Dashorst

JavaScript Roadmap - DOM ManipulationAswin Barath

Viewers also liked (20)

AWS Summit Berlin 2013 - Keynote - 6wunderkinderAWS Germany

Nano Goals AppCarlos Medina Cano

Bibstrip Wunderlist - lijstjes makenKatrien Schroyens

ProjectGladys Zamora

Engineering Wunderlist for Android - Ceasr Valiente, 6WunderkinderDroidConTLV

The document discusses the architecture of Wunderlist for Android. It describes how Wunderlist was redesigned with three independent layers - an Android layer, Sync layer, and SDK layer. The Sync layer manages business logic and sync operations using models, services, a cache, and a "Matryoshka" mechanism to resolve conflicts. The SDK layer provides APIs, models, and real-time sync via websockets. The Android layer focuses on decoupling the UI from business logic using MVP and loads data asynchronously from the Sync layer via EventBus and Loaders.

Myriam al dhaheri 201017821 - wunderlist – helps you manage your daily list...Myriam Al Dhaheri

To Do List Karma - Life style gamification - Manu Melwin Joymanumelwin

Todoist Karma is a productivity app that uses gamification to motivate users to complete tasks on time. It rewards users with positive karma for timely task completion, but assigns negative karma for too many incomplete tasks. Users can track their performance over time through a visual graph, and achieve different player rankings such as beginner, expert, and enlightened. The goal of the app is to help users achieve a true sense of personal progress through gamification.

Todoist iPhone App - Onboarding RoastSanket Nadhani

Todoist Logo Design ProcessTodoist

How To Grow Your SMS Marketing DatabaseTatango

The document discusses how to grow SMS subscribers by incentivizing customers to opt-in. It recommends clearly promoting the incentive in call-to-action messaging and avoiding "bait-and-switch" tactics. Common incentives include coupons, discounts or free items that drive high opt-in and redemption rates. Case studies show promotions from companies like Seattle Sun Tan, Julep and Taco Bell gaining thousands of opt-ins while retaining most new subscribers.

Empower Customer Engagement with Mobile ContextMobile Marketing Association

For companies that are successfully monetizing their mobile investment, mobile context is proving itself to be the “not-so-little” big data that’s making all the difference. Mobile context is the insight into consumer information, behavior and location that brands can leverage to optimize customer engagement through hyper-personalization that drives increased brand loyalty and revenue. That’s why the contextual mobile marketing opportunity is being valued at as much as $44 billion. Join this webinar to understand how companies today are using mobile context to drive deeper customer engagement and loyalty, mitigate risk and fraudulent activity, optimize mobile marketing ROI and deliver the best possible customer experience. Mobile context experts will be on hand to answer your questions around: How best to employ mobile context to benefit your business How to ensure your customers opt-in to share their mobile contextual information How to leverage mobile context to enhance and optimize current mobile investments Best practice industry use cases for mobile context Register today to receive a free copy of a recent research report by Syniverse and consulting firm Strategic Economic Engineering Corp. that uncovered a market value of as much as $44 billion for mobile context. Moderator: Leo Scullin, Global Industry Initiatives, Mobile Marketing Association Speakers: Alastair Hanlon, VP, Enterprise Solutions, Syniverse James Davlouros, VP, MasterCard Enterprise Partnerships, MasterCard Live Webinar Date: August 14, 2014

Mobile Means BusinessTack Mobile

The document discusses how mobile usage is growing rapidly and will soon surpass desktop usage. It notes that mobile data traffic and app downloads are increasing significantly each year. The presentation encourages businesses to develop a mobile strategy and app to engage mobile customers. It emphasizes understanding customer needs and behaviors, developing quality content and experiences, and testing strategies through an iterative process.

The Mobile Content MandateKaren McGrane

You don't get to decide which device people use to access your content: they do. By 2015, more people will access the internet via mobile devices than on traditional computers. In the US today, one-third of people who browse the internet on their mobile phone say that's the only way they go online—for teens and young adults, those numbers are even higher. It's time to stop avoiding the issue by saying "no one will ever want to do that on mobile; "chances are, someone already wants to. In this session, Karen will discuss why you need to deliver content wherever your customer wants to consume it — and what the risks when you don't make content accessible to mobile users. Already convinced it's important? She'll also explain how to get started with your mobile content strategy, defining what you want to publish, what the relationship should be between your mobile and desktop site, and how your editorial workflow and content management tools need to evolve.

The Do's and Dont's of Stellar Push and In-App Messaging: September 2014 WebinarLocalytics

This document discusses best practices for push notifications and in-app messages for mobile engagement campaigns. It provides tips for segmentation, personalization, timing, automation, and metrics. Examples are given for different industries. The future of engagement is predicted to include richer push notifications, interactive messages, and personalization based on proximity. Key takeaways emphasize targeting the right audience, carefully timed testing and automation to improve conversions.

Create and Convert Mobile Moments of TruthGreg Hickman

This document discusses the importance of optimizing the customer journey and website for mobile users. It emphasizes that the customer journey now often begins on mobile via sources like Facebook, YouTube, or email. It provides examples of how desktop-optimized websites can frustrate mobile users and hurt conversion rates. The key takeaways are to ensure your site is fully mobile responsive, test it across devices, map out all mobile touchpoints and sources of traffic, make your content easily consumable on mobile, and use mobile-friendly payment solutions.

Social Action Mobile MarketingWaterfall Mobile

Mobilizing a group of supporters requires more than communication. To effectively unite people around a common cause for social action, marketers face the task of creating a massive, engaged, online and offline community. Without numbers, the community’s voice lacks punch. Without engagement - both on the ground and the web - the community only thinks and talks about, rather than activating, change. To build, engage and support this community, marketers need to capture supporters anywhere and everywhere. Communication need to be immediate in order to take advantage of any political or societal developments. Location data remains vital in order to pinpoint concentrated groups of followers. Above all, social-action organizations need to transform supporters into advocates and activists empowered by each other. This webinar discusses how mobile addresses all of the above and enables development of an effective community with engaged constituents. Part of the Waterfall Industry Insights series.

Mobile Metrics 101: Everything web marketers need to know about app analyticsLocalytics

Today, people spend more time using mobile apps than they do sitting on a computer surfing the web. In fact, overall time spent in apps has increased by 21% over the last year! In this presentation, we'll show you how to apply your online marketing skills to the app-driven future. Access the webinar recording here: http://info.localytics.com/free-webinar-mobile-metrics-101-everything-web-marketers-need-to-know-about-app-analytics

ComputersRolando Castillo

LinkedIn is a professional networking platform that allows users to create profiles, connect with colleagues, search for jobs, and promote their professional skills and experiences. It provides excellent search and networking tools to help users find employment opportunities and employees. Having a professional presence on LinkedIn is important for both job seekers and employers in today's digital world.

Selling The Mobile WebBrad Frost

Everyone's screaming "We need to be 'on' mobile!" What does that even mean? Where do you start? One of the biggest challenges is getting clients, coworkers and stakeholders on board with the mobile web and actually execute a project the right way. The hurdles are many: lack of understanding of the medium, small budgets, outdated processes and many more. Every organization is different so changing existing behaviors and processes takes a lot of effort, patience and time. This presentation shows you how to execute a mobile web project successfully with a cross-disciplinary team. We'll provide a set of helpful tools and practices to get you started and help educate your coworkers and clients at the same time. Topics discussed: - Selling the mobile-first philosophy and strategy Using mobile as an excuse to develop a strong content strategy - Overcoming "App-itis" (people's tendency to think anything made for mobile needs to be a native app) - How to create future-friendly mobile web experiences

Apresentação Nova D9 Clube nova marco 2017 equipe Associação UnitelNilton Lucas Associação Unitel

AWS Summit Berlin 2013 - Keynote - 6wunderkinderAWS Germany

Nano Goals AppCarlos Medina Cano

Bibstrip Wunderlist - lijstjes makenKatrien Schroyens

ProjectGladys Zamora

Engineering Wunderlist for Android - Ceasr Valiente, 6WunderkinderDroidConTLV

Myriam al dhaheri 201017821 - wunderlist – helps you manage your daily list...Myriam Al Dhaheri

To Do List Karma - Life style gamification - Manu Melwin Joymanumelwin

Todoist iPhone App - Onboarding RoastSanket Nadhani

Todoist Logo Design ProcessTodoist

How To Grow Your SMS Marketing DatabaseTatango

Empower Customer Engagement with Mobile ContextMobile Marketing Association

Mobile Means BusinessTack Mobile

The Mobile Content MandateKaren McGrane

The Do's and Dont's of Stellar Push and In-App Messaging: September 2014 WebinarLocalytics

Create and Convert Mobile Moments of TruthGreg Hickman

Social Action Mobile MarketingWaterfall Mobile

Mobile Metrics 101: Everything web marketers need to know about app analyticsLocalytics

ComputersRolando Castillo

Selling The Mobile WebBrad Frost

Apresentação Nova D9 Clube nova marco 2017 equipe Associação UnitelNilton Lucas Associação Unitel

Similar to Simple todo app with meteor (20)

code-camp-meteormeghna gogna

This document provides an introduction to the Meteor platform for building web applications. It outlines Meteor's key features like using JavaScript on both the client and server, reactive programming, and the Distributed Data Protocol. The document then covers installing Meteor, creating a sample todo list app, using Meteor packages and templates, defining collections, routing, security concepts, and deploying built Meteor apps. It concludes with an example of building a blog posting app called "post-by-me" that demonstrates additional Meteor features like user accounts, editing content, and email functionality.

METEOR 101Tin Aung Lin

This document discusses Meteor, a JavaScript web framework. It provides an overview of Meteor's features like quick development time, isomorphic code, and live updates. It then outlines an agenda to create a basic to-do list app in Meteor, including setting up the dev environment, creating templates and collections, adding forms, and account systems. The document ends with resources for learning more about Meteor.

Meteor.js Workshop by DopravoArabNet ME

Rob Tweed :: Ajax and the Impact on Caché and Similar Technologiesgeorge.james

Ajax presents a new way of developing web applications that is more event-driven like typical client-server GUI applications. While Ajax uses technologies like JavaScript, XML, and CSS to asynchronously update parts of a page without reloading, the role of backends like Caché is reduced to basic data storage and retrieval. However, Caché remains well-suited for large, high-performance enterprise applications as they grow beyond what technologies like MySQL can easily support. Frameworks like EWD that define applications independently of technologies allow easier migration between backends like MySQL and Caché as applications scale.

Frontend microservices: architectures and solutionsMikhail Kuznetcov

Mikhail Kuznetcov presented on microservices approaches for modern frontend applications. He discussed how single responsibility principles can be applied through microservices to allow for faster development and deployment. Two common solutions for implementing microservices in frontend apps are Single-spa and Tailor, which allow for lazy loading of components and separation into independently deployable parts. Challenges include managing shared state and styles across components.

Javascript MVVM with Vue.JSEueung Mulyana

The document provides an introduction to Vue.js through examples and cases for building applications. It begins with quick start examples demonstrating basic Vue.js functionality like data binding, looping through arrays, and methods. It then covers two cases for building full applications with Vue.js, including fetching and manipulating data, and integrating with external APIs. References for further learning about Vue.js are also provided.

Meteor Day TalkBrandon Bechtel

This document provides an overview of the Meteor web development framework. It describes Meteor as a full-stack JavaScript platform that uses a data-over-the-wire approach rather than traditional HTTP requests. Key features highlighted include live data synchronization, rapid prototyping, deployment to web and mobile from a single codebase, and an active developer community. The remainder of the document provides a tutorial on building a basic todo list app in Meteor to demonstrate these capabilities.

Beginning MEAN StackRob Davarnia

This document provides an overview of the MEAN stack and demonstrates how to build a sample application with it. It begins with defining each component of the MEAN stack: MongoDB as the database, Express as the web application framework, AngularJS for the frontend framework, and Node.js as the runtime environment. It then demonstrates setting up a basic Express app, integrating authentication with Passport, and interacting with MongoDB using Mongoose. The document also discusses key concepts like asynchronous I/O in Node.js and model-view-controller patterns in AngularJS. Overall, it serves as a high-level introduction to the technologies that make up the MEAN stack.

Full Stack React Workshop [CSSC x GDSC]GDSC UofT Mississauga

State of modern web technologies: an introductionMichael Ahearn

Ta Javaserverside Eran TochAdil Jafri

The document provides an overview of building server-side Java web applications using Tomcat, JSP, and JavaBeans, covering topics like installing Tomcat, creating Java and JSP projects, writing JSP pages and JavaBeans, using sessions and includes, and the Model 2 architecture. It includes tutorials on setting up a sample "Phones" application to demonstrate concepts like retrieving data from a database and displaying it dynamically in JSP pages.

Test Automation for NoSQL DatabasesTobias Trelle

This document discusses test automation for NoSQL databases. It introduces NoSQL Unit, an open source framework for testing persistence layers of NoSQL databases. NoSQL Unit allows loading test data, connecting to databases, and comparing expected and actual data. It supports databases like MongoDB, Cassandra, Elasticsearch and Redis. The document also discusses using Travis CI for continuous integration of NoSQL database tests. Travis CI is a free service that runs builds and tests of GitHub projects. It can be configured using a .travis.yml file to install databases and run tests as part of the build.

Rest web service_with_spring_hateoasZeid Hassan

This document describes the development of a REST web service for car renting using Spring. The service defines three core functions: retrieving a list of available cars, renting a car, and returning a rented car. It provides these functions through a REST interface and uses JSON to serialize data between the Java backend and clients. The document outlines setting up the Spring backend to implement this interface and convert between Java objects and JSON, and includes details on developing a Java client to test the service and potential next steps to build a web client.

Node JS Express: Steps to Create Restful Web AppEdureka!

Node.js uses JavaScript - a language known to millions of developers worldwide - thus giving it a much lower learning curve even for complete beginners. Using Node.js you can build simple Command Line programs or complex enterprise level web applications with equal ease. Node.js is an event-driven, server-side, asynchronous development platform with lightning speed execution. It is open source and cross-platform, running on OS X, Linux and Windows. It also has an open source community that produces amazing modules available for use in your project for additional functionalities. Node.js helps you to code the most complex functionalities in just a few lines of code.

AngularJS for Web and MobileRocket Software

CraftCamp for Students - Introduction to Meteor.jscraftworkz

This document summarizes a workshop on the Meteor platform for building web and mobile apps. Meteor allows developing both client and server code in JavaScript and sharing code between them. Apps are built using MongoDB, WebSockets for live updates, and Node.js on the server. Meteor supports mobile development for Android and iOS using Cordova. Isomorphic packages allow accessing native device APIs like GPS. The structure of a Meteor app includes models, client-side templates and logic, server-side code, and public/private assets. A demo chat application is shown to illustrate a basic Meteor app. Questions are taken at the end.

Full Stack_Reac web Development and ApplicationJeyarajs7

Java Script - A New Lookrumsan

How to Build ToDo App with Vue 3 + TypeScriptKaty Slemon

Practical ODataVagif Abilov

The outline of the presentation (presented at NDC 2011, Oslo, Norway): - Short summary of OData evolution and current state - Quick presentation of tools used to build and test OData services and clients (Visual Studio, LinqPad, Fiddler) - Definition of canonical REST service, conformance of DataService-based implementation - Updateable OData services - Sharing single conceptual data model between databases from different vendors - OData services without Entity Framework (NHibernate, custom data provider) - Practical tips (logging, WCF binding, deployment)

code-camp-meteormeghna gogna

METEOR 101Tin Aung Lin

Meteor.js Workshop by DopravoArabNet ME

Rob Tweed :: Ajax and the Impact on Caché and Similar Technologiesgeorge.james

Frontend microservices: architectures and solutionsMikhail Kuznetcov

Javascript MVVM with Vue.JSEueung Mulyana

Meteor Day TalkBrandon Bechtel

Beginning MEAN StackRob Davarnia

Full Stack React Workshop [CSSC x GDSC]GDSC UofT Mississauga

State of modern web technologies: an introductionMichael Ahearn

Ta Javaserverside Eran TochAdil Jafri

Test Automation for NoSQL DatabasesTobias Trelle

Rest web service_with_spring_hateoasZeid Hassan

Node JS Express: Steps to Create Restful Web AppEdureka!

AngularJS for Web and MobileRocket Software

CraftCamp for Students - Introduction to Meteor.jscraftworkz

Full Stack_Reac web Development and ApplicationJeyarajs7

Java Script - A New Lookrumsan

How to Build ToDo App with Vue 3 + TypeScriptKaty Slemon

Practical ODataVagif Abilov

Recently uploaded (20)

Role of Data Annotation Services in AI-Powered ManufacturingAndrew Leo

Designing Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep DiveScyllaDB

Want to learn practical tips for designing systems that can scale efficiently without compromising speed? Join us for a workshop where we’ll address these challenges head-on and explore how to architect low-latency systems using Rust. During this free interactive workshop oriented for developers, engineers, and architects, we’ll cover how Rust’s unique language features and the Tokio async runtime enable high-performance application development. As you explore key principles of designing low-latency systems with Rust, you will learn how to: - Create and compile a real-world app with Rust - Connect the application to ScyllaDB (NoSQL data store) - Negotiate tradeoffs related to data modeling and querying - Manage and monitor the database for consistently low latencies

Complete Guide to Advanced Logistics Management Software in Riyadh.pdfSoftware Company

Explore the benefits and features of advanced logistics management software for businesses in Riyadh. This guide delves into the latest technologies, from real-time tracking and route optimization to warehouse management and inventory control, helping businesses streamline their logistics operations and reduce costs. Learn how implementing the right software solution can enhance efficiency, improve customer satisfaction, and provide a competitive edge in the growing logistics sector of Riyadh.

HCL Nomad Web – Best Practices and Managing Multiuser Environmentspanagenda

Webinar Recording: https://www.panagenda.com/webinars/hcl-nomad-web-best-practices-and-managing-multiuser-environments/ HCL Nomad Web is heralded as the next generation of the HCL Notes client, offering numerous advantages such as eliminating the need for packaging, distribution, and installation. Nomad Web client upgrades will be installed “automatically” in the background. This significantly reduces the administrative footprint compared to traditional HCL Notes clients. However, troubleshooting issues in Nomad Web present unique challenges compared to the Notes client. Join Christoph and Marc as they demonstrate how to simplify the troubleshooting process in HCL Nomad Web, ensuring a smoother and more efficient user experience. In this webinar, we will explore effective strategies for diagnosing and resolving common problems in HCL Nomad Web, including - Accessing the console - Locating and interpreting log files - Accessing the data folder within the browser’s cache (using OPFS) - Understand the difference between single- and multi-user scenarios - Utilizing Client Clocking

Rusty Waters: Elevating Lakehouses Beyond Sparkcarlyakerly1

Spark is a powerhouse for large datasets, but when it comes to smaller data workloads, its overhead can sometimes slow things down. What if you could achieve high performance and efficiency without the need for Spark? At S&P Global Commodity Insights, having a complete view of global energy and commodities markets enables customers to make data-driven decisions with confidence and create long-term, sustainable value. 🌍 Explore delta-rs + CDC and how these open-source innovations power lightweight, high-performance data applications beyond Spark! 🚀

Big Data Analytics Quick Research Guide by Arthur MorganArthur Morgan

This is a Quick Research Guide (QRG). QRGs include the following: - A brief, high-level overview of the QRG topic. - A milestone timeline for the QRG topic. - Links to various free online resource materials to provide a deeper dive into the QRG topic. - Conclusion and a recommendation for at least two books available in the SJPL system on the QRG topic. QRGs planned for the series: - Artificial Intelligence QRG - Quantum Computing QRG - Big Data Analytics QRG - Spacecraft Guidance, Navigation & Control QRG (coming 2026) - UK Home Computing & The Birth of ARM QRG (coming 2027) Any questions or comments? - Please contact Arthur Morgan at [email protected]. 100% human made.

Increasing Retail Store Efficiency How can Planograms Save Time and Money.pptxAnoop Ashok

Into The Box Conference Keynote Day 1 (ITB2025)Ortus Solutions, Corp

DevOpsDays Atlanta 2025 - Building 10x Development Organizations.pptxJustin Reock

Building 10x Organizations with Modern Productivity Metrics 10x developers may be a myth, but 10x organizations are very real, as proven by the influential study performed in the 1980s, ‘The Coding War Games.’ Right now, here in early 2025, we seem to be experiencing YAPP (Yet Another Productivity Philosophy), and that philosophy is converging on developer experience. It seems that with every new method we invent for the delivery of products, whether physical or virtual, we reinvent productivity philosophies to go alongside them. But which of these approaches actually work? DORA? SPACE? DevEx? What should we invest in and create urgency behind today, so that we don’t find ourselves having the same discussion again in a decade?

Procurement Insights Cost To Value Guide.pptxJon Hansen

#StandardsGoals for 2025: Standards & certification roundup - Tech Forum 2025BookNet Canada

Book industry standards are evolving rapidly. In the first part of this session, we’ll share an overview of key developments from 2024 and the early months of 2025. Then, BookNet’s resident standards expert, Tom Richardson, and CEO, Lauren Stewart, have a forward-looking conversation about what’s next. Link to recording, transcript, and accompanying resource: https://bnctechforum.ca/sessions/standardsgoals-for-2025-standards-certification-roundup/ Presented by BookNet Canada on May 6, 2025 with support from the Department of Canadian Heritage.

Linux Professional Institute LPIC-1 Exam.pdfRHCSA Guru

Semantic Cultivators : The Critical Future Role to Enable AIartmondano

The Evolution of Meme Coins A New Era for Digital Currency ppt.pdfAbi john

AI Changes Everything – Talk at Cardiff Metropolitan University, 29th April 2...Alan Dix

Talk at the final event of Data Fusion Dynamics: A Collaborative UK-Saudi Initiative in Cybersecurity and Artificial Intelligence funded by the British Council UK-Saudi Challenge Fund 2024, Cardiff Metropolitan University, 29th April 2025 https://alandix.com/academic/talks/CMet2025-AI-Changes-Everything/ Is AI just another technology, or does it fundamentally change the way we live and think? Every technology has a direct impact with micro-ethical consequences, some good, some bad. However more profound are the ways in which some technologies reshape the very fabric of society with macro-ethical impacts. The invention of the stirrup revolutionised mounted combat, but as a side effect gave rise to the feudal system, which still shapes politics today. The internal combustion engine offers personal freedom and creates pollution, but has also transformed the nature of urban planning and international trade. When we look at AI the micro-ethical issues, such as bias, are most obvious, but the macro-ethical challenges may be greater. At a micro-ethical level AI has the potential to deepen social, ethnic and gender bias, issues I have warned about since the early 1990s! It is also being used increasingly on the battlefield. However, it also offers amazing opportunities in health and educations, as the recent Nobel prizes for the developers of AlphaFold illustrate. More radically, the need to encode ethics acts as a mirror to surface essential ethical problems and conflicts. At the macro-ethical level, by the early 2000s digital technology had already begun to undermine sovereignty (e.g. gambling), market economics (through network effects and emergent monopolies), and the very meaning of money. Modern AI is the child of big data, big computation and ultimately big business, intensifying the inherent tendency of digital technology to concentrate power. AI is already unravelling the fundamentals of the social, political and economic world around us, but this is a world that needs radical reimagining to overcome the global environmental and human challenges that confront us. Our challenge is whether to let the threads fall as they may, or to use them to weave a better future.

ThousandEyes Partner Innovation Updates for May 2025ThousandEyes

IEDM 2024 Tutorial2_Advances in CMOS Technologies and Future Directions for C...organizerofv

Electronic_Mail_Attacks-1-35.pdf by xploitniftliyevhuseyn

TrsLabs - Fintech Product & Business ConsultingTrs Labs

Hybrid Growth Mandate Model with TrsLabs Strategic Investments, Inorganic Growth, Business Model Pivoting are critical activities that business don't do/change everyday. In cases like this, it may benefit your business to choose a temporary external consultant. An unbiased plan driven by clearcut deliverables, market dynamics and without the influence of your internal office equations empower business leaders to make right choices. Getting things done within a budget within a timeframe is key to Growing Business - No matter whether you are a start-up or a big company Talk to us & Unlock the competitive advantage

Cyber Awareness overview for 2025 month of securityriccardosl1

Role of Data Annotation Services in AI-Powered ManufacturingAndrew Leo

Designing Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep DiveScyllaDB

Complete Guide to Advanced Logistics Management Software in Riyadh.pdfSoftware Company

HCL Nomad Web – Best Practices and Managing Multiuser Environmentspanagenda

Rusty Waters: Elevating Lakehouses Beyond Sparkcarlyakerly1

Big Data Analytics Quick Research Guide by Arthur MorganArthur Morgan

Increasing Retail Store Efficiency How can Planograms Save Time and Money.pptxAnoop Ashok

Into The Box Conference Keynote Day 1 (ITB2025)Ortus Solutions, Corp

DevOpsDays Atlanta 2025 - Building 10x Development Organizations.pptxJustin Reock

Procurement Insights Cost To Value Guide.pptxJon Hansen

#StandardsGoals for 2025: Standards & certification roundup - Tech Forum 2025BookNet Canada

Linux Professional Institute LPIC-1 Exam.pdfRHCSA Guru

Semantic Cultivators : The Critical Future Role to Enable AIartmondano

The Evolution of Meme Coins A New Era for Digital Currency ppt.pdfAbi john

AI Changes Everything – Talk at Cardiff Metropolitan University, 29th April 2...Alan Dix

ThousandEyes Partner Innovation Updates for May 2025ThousandEyes

IEDM 2024 Tutorial2_Advances in CMOS Technologies and Future Directions for C...organizerofv

Electronic_Mail_Attacks-1-35.pdf by xploitniftliyevhuseyn

TrsLabs - Fintech Product & Business ConsultingTrs Labs

Cyber Awareness overview for 2025 month of securityriccardosl1

Simple todo app with meteor

1. TodoAppwith Meteor » Long Nguyen » @vangnol

2. Whatis Meteor? Meteor is a framework for building incredible web application. Meteor helps you build complex web application but in minimal amount of time. It's full- stack framework. On the server it runs on Nodejs, which means Meteor written in Javascript. Meteor has out of the box integration with MongoDB database. Meteor uses DDP Protocal to communicate between client and server.

3. Setup » MacOS or Ubuntu curl https://install.meteor.com/ | sh » Windows Go get a Mac or a Ubuntu laptop

4. Demo Simple Todo App with Meteor ♡♡♡

5. task.html <head> <title>Simple Todo App</title> </head> <body> <h1>Awesome Todo App</h1> <hr/> <div class="container"> {{> CreateTask}} {{> ListTasks}} {{> CompleteCounter}} </div> </body> <template name="ListTasks"> <ul> {{#each tasks}} <li class="task {{doneClass}}">{{> Task}}</li> {{/each}} </ul> </template>

6. <template name="Task"> <input type="checkbox" name="is_done" {{isDoneChecked}} /> {{subject}} </template> <template name="CreateTask"> <form class="create-task" > <input type="text" placeholder="Creating new task...!" /> </form> </template> <template name="CompleteCounter"> <h3>{{completeTask}} / {{totalTasks}} tasks completed</h3> </template>

7. task.css .task{ font-size: 20px; background-color: #EBEBEB; padding: 10px; margin-bottom: 2px; } .done{ text-decoration: line-through; }

8. task.js Todos = new Meteor.Collection('todos'); if(Meteor.isClient){ Template.ListTasks.helpers({ tasks: function(){ return Todos.ﬁnd(); }, doneClass: function(){ return this.is_done ? 'done' : ''; } }); Template.Task.helpers({ isDoneChecked: function(){ return this.is_done ? 'checked' : '' } });

9. Template.Task.events({ "click [name=is_done]": function(e, tmpl){ var id = this._id; var isDone = tmpl.find('input').checked; Todos.update({_id: id}, {$set: { is_done: isDone}}); } }); Template.CreateTask.events({ 'submit form': function(e, tmpl){ e.preventDefault(); var subject = tmpl.find('input').value; Todos.insert({subject: subject, created_at: new Date, is_done: false}); var form = tmpl.find('form'); form.reset(); } }); }

10. Template.CompleteCounter.helpers({ completeTask: function(){ return Todos.ﬁnd({is_done: true}).count(); }, totalTasks: function(){ return Todos.ﬁnd({}).count(); } }); } if(Meteor.isServer){ }

11. References » MeteorHacks » Best Learning Resources » Meteor Packages » Why Meteor will kill Ruby on Rails » Meteor Won’t Kill Rails Anytime Soon » How to Learn JavaScript Properly

12. Thankyou!

Simple todo app with meteor

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Simple todo app with meteor (20)

Recently uploaded (20)

Simple todo app with meteor