You are previewing Meteor: Full-Stack Web Application Development.
O'Reilly logo
Meteor: Full-Stack Web Application Development

Book Description

Learn how to create mobile and full-stack web applications in JavaScript by getting a deeper insight into Meteor

About This Book

  • This step-by-step tutorial will show you how to build fast, complex web applications

  • Over 65 hands-on recipes help you build and deploy elegant web applications

  • Optimize your web application for production use

  • Who This Book Is For

    If you are a web developer who is familiar with Meteor and has basic knowledge of web development, and you now want to explore new paradigms of single-page, real-time applications, this course is perfectly suited for you.

    What You Will Learn

  • Secure your site with Meteor best practices

  • Create reactive templates that update themselves when data changes

  • Add routing to a single-page application and make it appear like a real website

  • Make your own Meteor packages and see how to make them public

  • Rapidly build robust, responsive user interfaces

  • Publish your own reusable custom packages

  • Optimize your site for load speed with advanced publishers and subscribers

  • Master the intricacies of front-end development using Jeet, Bootstrap, CSS animations, and more

  • Leverage the aggregation framework to produce results with big data

  • Optimize your site for search engine visibility

  • In Detail

    Meteor is best JavaScript development platform and is packed with collections of libraries and packages bound together in a tidy way to take care of everything from development to production, making your web development easier.

    This course follows a learning path divided into three modules. Each module is a mini course in its own right, taking your knowledge to a new level as you progress. The first module takes you from the installation of Meteor to building a fully working web blog (including back end) to create and edit posts. Your path will begin with the basic concepts and folder structure of a Meteor project, learning how Meteor templates work to test packages, and seeing the application itself.

    The second module is a cookbook that starts with simple recipes designed for quick reference, and culminating advanced recipes that walk you through building and deploying a complete application. The cookbook covers all the major areas of Meteor development, including lesser-known and undocumented features too.

    With all the important concepts covered in the previous modules, the third module will get you equipped with simple solutions to boost your development skills. You’ll learn about mapping of real-world data and optimizing it, how to optimize and secure web applications and how to deploy and maintain it without breaking its features. Throughout the module, you will put your skills into practice and build an online shop from scratch.

    This Learning Path combines some of the best that Packt has to offer in one complete, curated package. It includes content from the following Packt products:

  • Building Single-page Web Apps with Meteor, Fabian Vogelsteller

  • Meteor Cookbook, Isaac Strack

  • Meteor Design Patterns, Marcelo Reyna

  • Style and approach

    This practical handbook has a step-by-step approach to help you improve your developer skills and efficiently built web applications using Meteor.

    Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the code file.

    Table of Contents

    1. Meteor: Full-Stack Web Application Development
      1. Table of Contents
      2. Meteor: Full-Stack Web Application Development
      3. Meteor: Full-Stack Web Application Development
      4. Credits
      5. Preface
        1. What this learning path covers
        2. What you need for this learning path
        3. Who this learning path is for
        4. Reader feedback
        5. Customer support
          1. Downloading the example code
          2. Errata
          3. Piracy
          4. Questions
      6. I. Module 1
        1. 1. Getting Started with Meteor
          1. The full-stack framework of Meteor
          2. Meteor's requirements
            1. Using Chrome's developer tools
            2. Using Git and GitHub
          3. Installing Meteor
            1. Installing Git
          4. Creating our first app
            1. Creating a good folder structure
            2. Preadd style files
          5. Adding basic packages
            1. Adding a core package
            2. Adding a third-party package
          6. Variable scopes
          7. Meteor's folder conventions and loading order
            1. Loading assets on the server
          8. Meteor's command-line tool
            1. Updating Meteor
            2. Deploying Meteor
          9. Summary
        2. 2. Building HTML Templates
          1. Writing templates in Meteor
          2. Building the basic templates
          3. Adding templates and partials
          4. Displaying data with template helpers
          5. Setting the data context for a template
            1. Using the {{#with}} block helper
          6. "this" in template helpers and template callbacks
          7. Adding events
          8. Block helpers
          9. Listing posts
          10. Spacebars syntax
            1. Accessing parent data contexts
            2. Passing data to helpers
          11. Summary
        3. 3. Storing Data and Handling Collections
          1. Meteor and databases
          2. Setting up a collection
          3. Adding post examples
          4. Querying a collection
          5. Updating a collection
          6. Database everywhere
          7. Differences between client and server collections
          8. Summary
        4. 4. Controlling the Data Flow
          1. Syncing data – the current Web versus the new Web
          2. Removing the autopublish package
          3. Publishing data
          4. Publishing only parts of data
          5. Publishing specific fields
          6. Lazy loading posts
          7. Switching subscriptions
          8. Some notes on data publishing
          9. Summary
        5. 5. Making Our App Versatile with Routing
          1. Adding the iron:router package
          2. Setting up the router
          3. Switching to a layout template
          4. Adding another route
          5. Moving the posts subscription to the Home route
          6. Setting up the post route
            1. Creating a single-post publication
            2. Adding the post route
            3. Linking the posts
          7. Changing the website's title
          8. Summary
        6. 6. Keeping States with Sessions
          1. Meteor's session object
            1. A better way for simple reactivity
          2. Using sessions in template helpers
            1. Session and hot code pushes
          3. Rerunning functions reactively
            1. Stopping reactive functions
          4. Using autorun in a template
          5. The reactive session object
          6. Summary
        7. 7. Users and Permissions
          1. Meteor's accounts packages
          2. Adding the accounts packages
          3. Adding admin functionality to our templates
            1. Adding a link for new posts
            2. Adding the link to edit posts
            3. Adding the login form
          4. Creating the template to edit posts
          5. Creating the admin user
            1. Adding permissions
            2. A note on security
          6. Creating routes for the admin
            1. Preventing visitors from seeing the admin routes
          7. Summary
        8. 8. Security with the Allow and Deny Rules
          1. Adding a function to generate slugs
          2. Creating a new post
            1. Saving a post
          3. Editing posts
            1. Updating the current post
          4. Restricting database updates
            1. Removing the insecure package
            2. Adding our first allow rules
          5. Adding a deny rule
          6. Adding posts using a method call
            1. Method stubs and latency compensation
            2. Changing the button
            3. Adding the method
          7. Calling the method
          8. Summary
        9. 9. Advanced Reactivity
          1. Reactive programming
            1. The invalidating cycle
          2. Building a simple reactive object
            1. Rerunning functions
          3. Creating an advanced timer object
          4. Reactive computations
            1. Stopping reactive functions
            2. Preventing run at start
            3. Advanced reactive objects
          5. Summary
        10. 10. Deploying Our App
          1. Deploying on meteor.com
            1. Deploying on meteor.com using a domain name
            2. Backup and restore databases hosted on meteor.com
          2. Deploying on other servers
            1. Bundling our app
            2. Deploying using Demeteorizer
            3. Deploying using Meteor Up
              1. Setting up the server
              2. Deploying with mup
          3. Outlook
          4. Summary
        11. 11. Building Our Own Package
          1. The structure of a package
          2. Creating our own package
            1. Adding the package metadata
            2. Adding the package
          3. Releasing our package to the public
            1. Publishing our package online
            2. Updating our package
          4. Summary
        12. 12. Testing in Meteor
          1. Types of tests
          2. Testing packages
            1. Adding package tests
            2. Running the package tests
          3. Testing our meteor app
            1. Testing using Jasmine
              1. Adding unit tests to the server
              2. Adding integration tests to the client
                1. Adding a test for the visitors
                2. Adding a test for the admin
          4. Acceptance tests
            1. Nightwatch
            2. Laika
          5. Summary
        13. A. Appendix
          1. List of Meteor's command-line tool commands
          2. The iron:router hooks
      7. II. Module 2
        1. 1. Optimizing Your Workflow
          1. Introduction
          2. Installing Meteor
            1. Getting ready
            2. How to do it...
            3. How it works...
            4. There's more...
          3. Finding documentation for Meteor
            1. How to do it…
            2. How it works…
            3. There's more…
          4. Getting help with questions
            1. How to do it…
            2. How it works…
              1. Stack Overflow
              2. Meteor forums
              3. The #meteor on IRC
            3. There's more…
          5. Setting up your project file structure
            1. Getting ready
            2. How to do it…
            3. How it works…
              1. client/server
              2. main/lib
              3. public/private
              4. both
            4. There's more…
            5. See also
          6. Setting up your development environment
            1. Getting ready?
            2. How to do it…
            3. How it works…
            4. There's more…
            5. See also
          7. Using the web console
            1. Getting ready
              1. Safari
              2. Firefox
              3. Chrome
            2. How to do it…
            3. How it works…
            4. There's more…
          8. Deploying a test app to Meteor
            1. Getting ready
            2. How to do it…
            3. How it works…
            4. There's more…
            5. See also
          9. Deploying to Meteor using a CNAME redirect
            1. Getting ready
            2. How to do it…
            3. How it works…
            4. See also
          10. Deploying to a custom hosted environment
            1. Getting ready
            2. How to do it…
            3. How it works…
            4. There's more…
            5. See also
          11. Deploying with Meteor Up (MUP)
            1. Getting ready
            2. How to do it…
            3. How it works…
            4. See also
          12. Using CoffeeScript
            1. Getting ready
            2. How to do it…
            3. How it works…
            4. See also
          13. Using CSS compilers
            1. Getting ready
            2. How to do it…
              1. Using Stylus
              2. Using Less
              3. Using SCSS / SASS
            3. How it works…
            4. See also
        2. 2. Customizing with Packages
          1. Introduction
          2. Adding Meteor packages
            1. Getting ready
            2. How to do it...
            3. How it works...
            4. There's more…
            5. See also
          3. Removing Meteor packages
            1. Getting ready
            2. How to do it…
            3. How it works…
            4. There's more…
          4. Discovering new packages with Atmosphere
            1. Getting ready
            2. How to do it…
            3. How it works…
            4. There's more…
            5. See also
          5. Creating a multipage application with Iron Router
            1. Getting ready
            2. How to do it…
            3. How it works…
            4. There's more…
            5. See also
          6. Building a custom package
            1. Getting ready
            2. How to do it…
            3. How it works…
            4. There's more…
            5. See also
          7. Using npm modules
            1. Getting ready
            2. How to do it…
            3. How it works…
            4. There's more…
            5. See also
          8. Publishing custom packages to Atmosphere
            1. Getting ready
            2. How to do it…
            3. How it works…
            4. There's more…
            5. See also
        3. 3. Building Great User Interfaces
          1. Introduction
          2. Inserting templates with Spacebars
            1. Getting ready
            2. How to do it...
            3. How it works...
            4. There's more…
          3. Inserting raw HTML using triple braces
            1. Getting ready
            2. How to do it…
            3. How it works…
            4. See also
          4. Creating dynamic lists
            1. Getting ready
            2. How to do it…
            3. How it works…
            4. There's more…
            5. See also
          5. Building a smooth interface with Bootstrap
            1. Getting ready
            2. How to do it…
            3. How it works…
            4. There's more…
            5. See also
          6. Creating customized global helpers
            1. Getting ready
            2. How to do it…
            3. How it works…
            4. There's more…
            5. See also
          7. Creating custom components
            1. Getting ready
            2. How to do it…
            3. How it works…
            4. There's more…
            5. See also
          8. Using reactivity with HTML attributes
            1. Getting ready
            2. How to do it…
            3. How it works…
            4. See also
          9. Using dynamic templates
            1. Getting ready
            2. How to do it...
            3. How it works…
            4. There's more…
            5. See also
          10. Animating DOM elements
            1. Getting ready
            2. How to do it...
            3. How it works…
            4. There's more…
            5. See also
        4. 4. Creating Models
          1. Introduction
          2. Implementing a simple collection
            1. Getting ready
            2. How to do it...
            3. How it works...
            4. See also
          3. Using the Session object
            1. Getting ready
            2. How to do it…
            3. How it works…
            4. There's more…
            5. See also
          4. Sorting with MongoDB queries
            1. Getting ready
            2. How to do it…
            3. How it works…
            4. There's more…
            5. See also
          5. Filtering with MongoDB queries
            1. Getting ready
            2. How to do it…
            3. How it works…
            4. There's more…
            5. See also
          6. Creating upsert MongoDB queries
            1. Getting ready
            2. How to do it…
            3. How it works…
            4. There's more…
            5. See also
          7. Implementing a partial collection
            1. Getting ready
            2. How to do it…
            3. How it works…
            4. There's more…
            5. See also
        5. 5. Implementing DDP
          1. Introduction
          2. Reading the DDP stream
            1. Getting ready
            2. How to do it...
            3. How it works...
            4. There's more…
            5. See also
          3. Using client-only collections
            1. Getting ready
            2. How to do it…
            3. How it works…
            4. See also
          4. Implementing multiserver DDP
            1. Getting ready
            2. How to do it…
            3. How it works…
            4. There's more…
            5. See also
          5. Integrating DDP with other technologies
            1. Getting ready
            2. How to do it…
            3. How it works…
            4. There's more…
            5. See also
        6. 6. Mastering Reactivity
          1. Introduction
          2. Creating and consuming a reactive value
            1. Getting ready
            2. How to do it...
            3. How it works...
            4. There's more…
            5. See also
          3. Using Ajax query results in ReactiveVar
            1. Getting ready
            2. How to do it…
            3. How it works…
            4. See also
          4. Making a custom library reactive
            1. Getting ready
            2. How to do it…
            3. How it works…
            4. See also
          5. Updating Blaze templates without Mongo
            1. Getting ready
            2. How to do it…
            3. How it works…
            4. See also
          6. Using inline data to modify UI elements reactively
            1. Getting ready
            2. How to do it...
            3. How it works...
            4. There's more…
            5. See also
          7. Integrating a jQuery UI
            1. Getting ready
            2. How to do it...
            3. How it works...
            4. There's more…
            5. See also
        7. 7. Using Client Methods
          1. Introduction
          2. Creating dynamic graphs with SVG and Ajax
            1. Getting ready
            2. How to do it...
            3. How it works...
            4. See also
          3. Using the HTML FileReader to upload images
            1. Getting ready
            2. How to do it…
            3. How it works…
            4. There's more…
            5. See also
          4. Creating a coloring book with the Canvas element
            1. Getting ready
            2. How to do it…
            3. How it works…
            4. There's more…
            5. See also
        8. 8. Integrating Third-party Libraries
          1. Introduction
          2. Using npm packages directly
            1. Getting ready
            2. How to do it...
            3. How it works...
            4. There's more...
            5. See also
          3. Building graphs with D3.js
            1. Getting ready
            2. How to do it…
            3. How it works…
            4. There's more…
            5. See also
          4. Creating cutting-edge UIs with Polymer
            1. Getting ready
              1. Creating your app and folders
              2. Creating your files
              3. Configuring Bower and installing Polymer
              4. Adding helper Meteor packages
              5. Configuring Meteor
            2. How to do it…
            3. How it works…
            4. There's more…
            5. See also
        9. 9. Securing Your Application
          1. Introduction
          2. Basic safety – turning off autopublish
            1. Getting ready
              1. Project setup
              2. Creating a basic template
              3. Adding CSS styling
            2. How to do it...
            3. How it works...
            4. See also
          3. Basic safety – removing insecure
            1. Getting ready
            2. How to do it...
            3. How it works...
            4. See also
          4. Securing data transactions with allow and deny
            1. Getting ready
            2. How to do it...
            3. How it works...
            4. There's more…
            5. See also
          5. Hiding data with façades
            1. Getting ready
            2. How to do it...
            3. How it works...
            4. See also
          6. Protecting the client with browser-policy
            1. Getting ready
              1. Scaffolding setup
              2. Add CDN-hosted bootstrap
              3. Add inline and eval() scripts
            2. How to do it...
            3. How it works...
            4. See also
        10. 10. Working with Accounts
          1. Introduction
          2. Implementing OAuth accounts packages
            1. Getting ready
            2. How to do it...
            3. How it works...
            4. There's more…
            5. See also
          3. Customizing the accounts login
            1. Getting ready
            2. How to do it...
            3. How it works...
            4. There's more…
            5. See also
          4. Performing two-factor authentication
            1. Getting ready
              1. Creating our baseline application
              2. Signing up for the Twilio SMS service
              3. Creating an SMS service on Twilio
              4. Installing the twilio-node npm package
              5. Creating and testing the sendTwilio() method
            2. How to do it...
            3. How it works...
            4. There's more…
            5. See also
        11. 11. Leveraging Advanced Features
          1. Introduction
          2. Building custom server methods
            1. Getting ready
              1. Project setup
              2. Creating a simple app
            2. How to do it...
            3. How it works...
            4. There's more…
            5. See also
          3. Creating custom EJSON objects
            1. Getting ready
              1. Declaring the Swatch object
              2. Modifying Swatches.insert()
              3. Changing Swatch colors
            2. How to do it…
            3. How it works…
            4. There's more…
            5. See also
          4. Handling asynchronous events
            1. Getting ready
              1. Creating a baseline Meteor app
              2. Obtaining your Twitter Access Tokens
              3. Initializing twit
              4. Creating the Tweets collection, and building a stream reader
              5. Tracking and testing changes
            2. How to do it…
            3. How it works…
            4. There's more…
            5. See also
          5. Using asynchronous functions
            1. Getting ready
            2. How to do it…
            3. How it works…
            4. There's more…
            5. See also
        12. 12. Creating Useful Projects
          1. Introduction
          2. Creating RESTful web services
            1. Getting ready
              1. Creating the baseline application
              2. Installing and configuring Postman
            2. How to do it...
            3. How it works...
            4. There's more…
            5. See also
          3. Creating a complete app with Iron Router
            1. Getting ready
            2. How to do it…
            3. How it works…
            4. There's more…
            5. See also
          4. Deploying apps to mobile devices
            1. Getting ready
            2. How to do it…
            3. How it works…
            4. There's more…
            5. See also
          5. Adding social sharing
            1. Getting ready
            2. How to do it…
            3. How it works…
            4. There's more…
            5. See also
      8. III. Module 3
        1. 1. Getting Started with Meteor
          1. CoffeeScript for Meteor
            1. Objects and arrays
            2. Logical statements and operators
            3. Functions
            4. Binding
          2. Jade for Meteor
            1. HTML tags
            2. Templates and components
            3. Helpers
          3. Stylus for Meteor
            1. CSS tags
            2. Variables
            3. Functions/mixins
          4. Templates, helpers, and events
            1. Templates
            2. Creating helpers
            3. Events
          5. The event loop and the merge box
            1. The event loop
            2. The merge box
          6. The beginning of our online shop
            1. The must-have packages
            2. File structure
          7. Summary
        2. 2. Publish and Subscribe Patterns
          1. Template-level subscriptions
            1. Setting up products for the online shop
            2. Building the publisher
            3. Subscribing to the publisher
          2. Database relationships
            1. One to one
            2. One to many
            3. Many to many
          3. Publishing with relations
            1. Publishing products with images (one to one)
            2. Publishing orders with details (one to many)
            3. Publishing a tag with products (many to many)
            4. Key, foreign key, options, and filter
          4. Aggregation publishers
            1. The aggregation framework
            2. Publishing the results
          5. External API publishers
            1. The HTTP package
          6. Summary
        3. 3. Front-end Patterns
          1. Responsive design
            1. General settings
            2. Bootstrap
            3. Jeet grid systems with Rupture
          2. Super helpers
            1. Defining a Blaze helper
            2. Making a global dictionary
          3. Variable types
            1. Session variables
            2. Persistent variables
            3. File scope variables
            4. The ReactiveVar variables
          4. Forms
            1. Meteor Methods
            2. Autoform
          5. Loading data
            1. Designing the loading indicator
            2. Implementing the loading indicator
          6. Animations and transitions
            1. Animating with CSS
            2. Executing animations in Meteor
          7. SEO
            1. Prerender.io
            2. Using Meta
            3. Schema.org
          8. Summary
        4. 4. Application Patterns
          1. Filtering and paging collections
            1. Router gotchas
            2. Stateful pagination
            3. Filtering
          2. Security
            1. Roles
            2. Collection2
            3. Deny rules
            4. Custom deny rules
            5. The Meteor methods – round 2
            6. Managing the wait time
            7. Browser policy
            8. Framing
            9. Content
          3. External APIs
            1. Synchronization
            2. Webhooks
          4. Summary
        5. 5. Testing Patterns
          1. Behavior tests
          2. Unit tests
          3. Summary
        6. 6. Deployment
          1. Setting up Modulus
          2. Setting up Compose
          3. Setting up Kadira
          4. Setting up an SSL certificate
          5. Summary
      9. B. Bibliography
      10. Index