<h2>Overview</h2>
<p>Chapter 12 dives into the practical application of concepts learned in previous chapters, focusing on building a fully functional app with integrated tests. It seamlessly builds on the insights shared in Chapter 11, where readers were introduced to the <code>meteor-book:reactive-timer</code> package. This chapter guides you through the essential steps to ensure that your example application operates smoothly, emphasizing the importance of testing in the development process.</p>
<h2>Features</h2>
<ul>
<li><strong>Comprehensive Testing</strong>: The chapter highlights the necessity of writing tests for your app, providing a solid foundation for future development projects.</li>
<li><strong>Integration with Previous Work</strong>: It builds on the previously covered <code>reactive-timer</code> package, enhancing your understanding of Meteor’s functionalities.</li>
<li><strong>Step-by-Step Instructions</strong>: Clear and concise instructions guide you through the installation of Meteor and the setup of your example code, ensuring a hands-on learning experience.</li>
<li><strong>Focused Learning</strong>: Each section is designed to reinforce key concepts from the earlier chapters, making it easier to grasp advanced topics.</li>
<li><strong>Practical Application</strong>: The focus is on real-world application, allowing you to see the relevance of testing and package management in app development.</li>
</ul>


<h2>Overview</h2>
<p>Meteor Build Client is a powerful tool designed for developers utilizing the Meteor framework to craft client-side applications. It simplifies the process of bundling your app for deployment by generating a straightforward <code>index.html</code> file. This file can be hosted on any web server or even viewed directly using the file protocol. With Meteor Build Client, you can focus on developing your application while the tool efficiently manages the complexities of bundling.</p>
<p>This bundler also offers flexibility in terms of usage, allowing you to configure various options such as settings and paths. This makes it an essential part of the Meteor development workflow, especially for those looking to streamline their client deployment process.</p>
<h2>Features</h2>
<ul>
<li><strong>Easy Bundling</strong>: Generates a simple <code>index.html</code> along with associated CSS and JS files, perfect for quick hosting on any server.</li>
<li><strong>Custom Output</strong>: Provides flexibility with the output folder, enabling developers to specify paths and manage project files effectively.</li>
<li><strong>Settings Management</strong>: Allows you to easily pass <code>settings.json</code> files for configuration, ensuring your application retains necessary environments settings.</li>
<li><strong>Absolute/Relative URLs</strong>: Offers the ability to define absolute or relative URL paths, making it easy to serve the app via different protocols or paths.</li>
<li><strong>Legacy Support</strong>: By default, the tool supports legacy ES5 bundles, accommodating older projects while also supporting modern ES6 builds.</li>
<li><strong>Command Line Flexibility</strong>: Includes various command line options for advanced configurations, giving developers the power to customize the build process.</li>
<li><strong>Best Practices and Recommendations</strong>: Comes with tips and recommended packages to maximize the efficiency and effectiveness of your client builds.</li>
</ul>


<h2>Overview</h2>
<p>Meteor Persistent Minimongo is a great tool for developers looking to enhance their web applications with client-side data persistence. This package provides a simple yet effective solution for managing collections in a Meteor environment, leveraging browser storage options such as IndexedDB, WebSQL, and localStorage. With this functionality, developers can maintain data across sessions, improving the user experience by allowing apps to remember user interactions and preferences.</p>
<p>The package's smooth integration and reactive data capabilities make it an appealing choice for anyone building on the Meteor platform. However, it’s important to note some changes from previous versions, particularly concerning data storage and cross-tab reactivity. Despite these adjustments, the package remains a valuable asset for creating dynamic applications that require ongoing state management.</p>
<h2>Features</h2>
<ul>
<li>
<p><strong>Cross-Browser Storage Support</strong>: Utilizes IndexedDB, WebSQL, and localStorage for maximum compatibility and reliability in saving data across different browsers.</p>
</li>
<li>
<p><strong>Reactive Data Management</strong>: Keeps the Meteor.Collection reactive goodness intact, ensuring that any updates to the collection are reflected in real-time across the application.</p>
</li>
<li>
<p><strong>Simple Implementation</strong>: Empowers developers to easily create persistent data storage with minimal setup, making it accessible for both seasoned programmers and newcomers to Meteor.</p>
</li>
<li>
<p><strong>Supports Local Collections</strong>: Ideal for applications like shopping carts, where maintaining a local state significantly enhances user experience.</p>
</li>
<li>
<p><strong>Consistent Collection Backup</strong>: Keeps an identical copy of the collection's data in browser storage, preventing data loss when users refresh or navigate away from the app.</p>
</li>
<li>
<p><strong>Easy to Install</strong>: Quick installation process via the command <code>$ meteor add frozeman:persistent-minimongo</code>, making it easy to add to your Meteor projects.</p>
</li>
<li>
<p><strong>Configurable App Naming</strong>: Allows the last parameter in the constructor to set an app name for better organization of persisted collections within the browser storage.</p>
</li>
</ul>


<h2>Overview</h2>
<p>The Template Animation Helper package allows for easy animation of templates in a Meteor application. It allows templates to wait for animations to finish on elements with the "animate" class, and then removes the class to start the CSS transition. When the template is removed, the animate class is re-added to animate the elements back to their original state. By default, it uses the Session object to render templates at the position of the {{> AnimateTemplate}} helper, but it can also utilize the View class from the view-manager package if available.</p>
<h2>Features</h2>
<ul>
<li>Animation of templates</li>
<li>Wait for animations to finish on elements with the "animate" class</li>
<li>Start CSS transitions by removing the animate class</li>
<li>Re-add animate class to animate elements back to original state when template is removed</li>
<li>Use Session or View to render templates at the position of the helper</li>
</ul>
<h2>Summary</h2>
<p>The Template Animation Helper package allows for easy animation of templates in a Meteor application. It provides a convenient way to wait for animations to finish on elements with the "animate" class, and then remove the class to start the CSS transition. With options to use either the Session or View class for rendering templates, it offers flexibility in integrating animation effects into a Meteor project.</p>


<h2>Overview:</h2>
<p>The TemplateVar is a wrapper for Meteors ReactiveVar that provides reactive variables for template instance specific reactivity. It can be used in template helpers, event handlers, callbacks (created, rendered, destroyed), or autorun. This allows for easy setting and getting of properties inside a template, as well as cross-template communication.</p>
<h2>Features:</h2>
<ul>
<li>Template-specific reactivity: TemplateVar allows for the use of reactive variables that are specific to each template instance.</li>
<li>Easy setting and getting of properties: TemplateVar simplifies the process of setting and getting properties inside a template, making it more intuitive.</li>
<li>Cross-template communication: TemplateVar provides methods for setting and getting the TemplateVar of another template, allowing for communication between templates.</li>
</ul>
<h2>Summary:</h2>
<p>The TemplateVar package provides a convenient way to work with reactive variables in Meteor templates. It allows for template-specific reactivity and simplifies the process of setting and getting properties inside a template. Additionally, it provides methods for cross-template communication, making it easier to share data between templates. Overall, the TemplateVar package improves the efficiency and ease of working with reactive variables in Meteor.</p>


<h2>Overview</h2>
<p>The Meteor Frontend package offers a neat solution for developers looking to decouple the frontend and backend components of their Meteor applications. With this package, you can effortlessly distribute your frontend code independently, making it versatile for a variety of deployment scenarios. Designed for simplicity, this package automates various tasks, thereby streamlining the development workflow for Meteor applications.</p>
<p>Whether you're a solo developer or part of a larger team, this package provides the tools necessary to manage and deploy your Meteor frontend efficiently. By automating the build process with Grunt and allowing for customized deployment settings, you can focus more on crafting your application rather than getting bogged down with repeated manual tasks.</p>
<h2>Features</h2>
<ul>
<li><strong>Decoupled Architecture</strong>: Automatically separates your Meteor frontend from the backend, allowing for standalone distribution and easier management.</li>
<li><strong>Simple Installation</strong>: Requires only Node, npm, and Grunt-cli to get started, making the setup process quick and straightforward.</li>
<li><strong>Easy Development Server</strong>: Launches a local development server at <code>http://localhost:9000</code>, enabling you to test your frontend changes in real time.</li>
<li><strong>Streamlined Build Process</strong>: Automatically runs Grunt tasks to generate the distribution package, saving time and effort on manual builds.</li>
<li><strong>Custom Deployment Settings</strong>: Easily modify the ROOT_URL in Gruntfile.js for tailored deployment to your web server.</li>
<li><strong>Router Compatibility</strong>: Supports configuration for routers, enabling URL mapping to index.html for smooth routing functionality.</li>
<li><strong>Optimized Build Size</strong>: Offers options to slim down your Meteor build by removing unnecessary standard-app-packages.</li>
<li><strong>Open Source License</strong>: Distributed under the MIT License, promoting free use, modification, and distribution of the software.</li>
</ul>


<pre><code class="language-markdown">## Overview
This example illustrates the fundamental concepts of developing a decentralized application (Ðapp) using Meteor. By separating Ethereum logic from the main application, it highlights the essential steps involved in interacting with smart contracts on the Ethereum blockchain. Developers can gain a solid understanding of how to receive logs from contracts and call contract functions effectively.

Building a Ðapp with Meteor is both straightforward and powerful, enabling creativity in blockchain application development. By following this guide, you can quickly get started with deploying a contract and testing its functionality directly from your application.

## Features
- **Ethereum Logic Separation**: Keeps the decentralized application logic separate from other functionalities for cleaner, more maintainable code.
- **Contract Interaction**: Easily call functions on deployed smart contracts, facilitating real-time data interaction within your Ðapp.
- **Log Reception**: Receive logs directly from contracts to monitor and respond to blockchain events efficiently.
- **Geth Node Integration**: Seamlessly start a Geth node on a testnet, making it simple to test your Ðapp without the need for real funds.
- **Customizable Deployment**: Instructions for deploying contract code allow developers to personalize their application with custom logic.
- **Hands-On Learning**: Includes practical workshops and examples to enhance understanding of Ðapp development using Meteor.
</code></pre>


Frozeman

Book Building Single Page Web Apps With Meteor

Meteor Build Client

Meteor Persistent Minimongo2

Meteor Template Animation Helper

Meteor Template Var

MeteorFrontend

Simple Dapp Example