Beruflich Dokumente
Kultur Dokumente
Ken Rogers
ii
Contents
Preface v
1 Introduction 1
1.1 What to expect . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.2 Prerequisites . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.3 What we are learning . . . . . . . . . . . . . . . . . . . . . . 2
1.4 What we wont be covering . . . . . . . . . . . . . . . . . . . 5
1.4.1 Apollo . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.4.2 Redux . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.4.3 Mantra . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.5 Some nal notes . . . . . . . . . . . . . . . . . . . . . . . . . 6
2 Project Planning 9
2.1 Planning Out Our Application . . . . . . . . . . . . . . . . . 10
2.1.1 User system . . . . . . . . . . . . . . . . . . . . . . . 10
2.1.2 The Dashboard . . . . . . . . . . . . . . . . . . . . . 10
2.1.3 Add Beer Module . . . . . . . . . . . . . . . . . . . . 11
2.1.4 Buddies . . . . . . . . . . . . . . . . . . . . . . . . . 11
2.2 Data Structure . . . . . . . . . . . . . . . . . . . . . . . . . . 12
2.2.1 Our Collections . . . . . . . . . . . . . . . . . . . . . 12
3 Project Setup 15
3.1 Directory Structure . . . . . . . . . . . . . . . . . . . . . . . 17
3.1.1 Client . . . . . . . . . . . . . . . . . . . . . . . . . . 18
3.1.2 Server . . . . . . . . . . . . . . . . . . . . . . . . . . 18
iii
iv CONTENTS
3.1.3 Imports . . . . . . . . . . . . . . . . . . . . . . . . . 18
3.1.4 api . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
3.1.5 startup . . . . . . . . . . . . . . . . . . . . . . . . . . 19
3.1.6 ui . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
3.2 Setting Up Our Data . . . . . . . . . . . . . . . . . . . . . . 20
3.3 Setting Up Our Routes . . . . . . . . . . . . . . . . . . . . . 22
3.4 Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
v
vi PREFACE
Chapter 1
Introduction
Welcome to Meteor and React! If you read the rst version of my book, then
you know this version has been a long time coming. Im super excited to nally
be getting it out to the world. I really think its a great way to learn these two
great JavaScript frameworks.
1
2 CHAPTER 1. INTRODUCTION
The HTML version is free and will always be free, and Ill be releasing the
downloadable ebook and screencasts starting off at a very discounted rate, and
then increasing with every chapter release.
So when I release the initial three chapters, the ebook package will be $16
and the screencast package will be $44. These prices will increase incremen-
tally with each chapter release, eventually settling on $39 for the ebook package
and $99 for the screencast package when the book is completed.
The book will be nished rst, followed by the screencasts. Im hoping to
hit a schedule of one or two chapters per week until the book is nished.
No matter what time you purchase the package, youll be sent each chapter
as it is nished.
So if you purchase the screencast package when the rst three chapters are
released, youll be sent each new chapter and screencast as they are released.
So if youre looking to save some money and still get the videos and ebook,
this is a great way to do that.
1.2 Prerequisites
This book is about at an intermediate level. You should be familiar with both
Meteor and React, but dont need to be an expert in either of these. Go through
the Meteor Tutorial and check out the React documentation to get an introduc-
tion to the two technologies well be using.
You should be familair with web development in general, otherwise you
may have some trouble getting through this book. Overall though, Ive tried to
write it in a way that is accessible to most users, while still being useful.
formation with friends. Well be covering all of the concepts necesary to un-
derstand how to build applications with Meteor and React, from initial project
setup all the way to deployment.
Each chapter will introduce a new component to the application, and will
include working example code so you can compare your work and see where
your bugs are.
Something that Im really improving on in this version is that every chap-
ters sample code will be a working version of the application. One of the
weak points in my last book was the sub-par example code, so Im working
really hard to make sure the example code is exactly in line with the book.
One part of that will be that in each chapter we will be adding a complete
component, so that you will have a working, bug free application at the end of
each chapter. Having half-nished sections caused some confusion in the last
book, so Im hoping to rectify that in this latest version.
Heres a basic outline of the content. Certain things may change as I get
further into the book, but this will be the basic format.
1. Introduction
3. Project set up
(a) Set up user accounts system including login, registration, and basic
user prole
(b) Create a basic display
7. Dashboard page
9. Deployment
There will be exercises at the end of each chapter to help you solidify the
knowledge youll learn by working through the book. Sometimes these will be
questions you should answer and sometimes they will be additions or modi-
cations to the application.
I will not be providing the solutions to these exercises.
The exercises are meant to be a supplemental part of the book designed
to help you cement the knowledge in your head. I want you to be able to
solve these challenges on your own. Youll never learn more in programming
1.4. WHAT WE WONT BE COVERING 5
than you will when you push through and solve a problem and get something
working.
If you are really, really stuck on one of the exercises, email me and Ill do
my best to help you out.
1.4.1 Apollo
This may be the biggest, as numerous people (including me, were very excited
about Apollo). However, I have decided not to include it in this book for a
few reasons. Originally, I was very excited about Apollo, and had planned on
including it in the book, but I ended up deciding against it.
First, I simply dont think it is best suited for Meteor applications. I think
Apollos best use case is in JavaScript applications that are built using different
frameworks. The beauty of Meteor is that it is meant to be an all-in-one solution
to building reactive web applications. Apollo takes away this inherent reactivity
and responsiveness, which in turn takes away a major component of Meteor
apps.
Yes it would be great to be able to use a schema like GraphQL, but for this
particular book, I felt the cons of using Apollo outweighed the pros.
For a more detailed version of how and why I came to these conclusions,
take a look at this post by Sacha Greif: Should You Make the Switch? Using
Apollo Inside Your Meteor App
6 CHAPTER 1. INTRODUCTION
1.4.2 Redux
Redux is awesome, but I feel it is unnecessary for Meteor applications. I played
around with Redux for the last version, and it was another aspect that I had
planned on including in this version. But the more I used it, the more I felt it
added unnecessary complexity to Meteor applications.
The goal of this book is to build great Meteor applications, and when you
start adding different JavaScript frameworks simply because they do something
cool, it starts to turn a Meteor app into a Frankenstein monster of sorts. Meteor
is meant to be all-in-one and easy to use, and Redux was another component
that I felt took away from that.
1.4.3 Mantra
I struggled with this decision for quite a while before utlimately deciding against
using Mantra in this version. There are two main reasons for this.
First, I thought it was better to stick with the method that MDG has laid out
in their guide, which contradicst the way Mantra is set up in quite a few ways.
I think they are both great ways to structure an application, but using the MDG
guide seemed a better solution in regards to a sustainable book that will still be
useful in the future.
Second, the Mantra ecosystem seems a bit fuzzy right now, and I simply
dont know where its going or how much longer it will be actively maintained,
developed on, and documented.
learning Meteor. User feedback is critical in the process, and anything you can
do to help would be great. If you scroll up to the top of the page, you can hit
the Contact Author button at any time to send me an email.
When it comes to support, Ill do my best to help anyone out who is strug-
gling, but I cant always provide one on one help to everyone who needs it. I
will do my best to at least respond to every email, even if I cant solve your
problem.
The main goal of the example code is to make it so that if you are stuck on
a bug you cant x, you can compare your code to the example code and get
past it.
With all that said, lets get going building our application!
8 CHAPTER 1. INTRODUCTION
Chapter 2
Project Planning
Alright lets get building our application. Were going to start by thinking about
exactly what our application needs to do and what it will look like.
There are a few basic components that our application will have. In this
chapter well go over all of those so that we have a basic idea of how our
application will be laid out.
When developing with a framework like Meteor, it is extremely important
to plan everything out and get a picture in your head of how it will be structured.
Because Meteor is so exible, you can nd yourself in the weeds pretty quick
if you dont have a solid gameplan.
In this chapter well be making that gameplan. Well start out with the
layout structure, and then move into planning out our data structure. There
wont be any code in this chapter, just some planning and note taking. Feel free
to sketch some of this out as well if that helps you visualize it.
This might be boring for a lot of people, but proper planning is critical for
creating a maintainable, functional application. I really want to stress the im-
portance of planning everything out when developing with a exible framework
like Meteor.
Things will most likely change as the application grows, which is ne and
expected, but its important to lay the groundwork.
9
10 CHAPTER 2. PROJECT PLANNING
Login page
Registration page
Prole setup
Well use Meteora accounts-password package to get the base of this com-
ponent going, but well be rolling out our own UI for it.
Beer name
Beer type
Description of beer
Recommendation
Picture of beer
2.1.4 Buddies
This is the social aspect of the application. The buddies module will contain
all of the users current buddies and their beer information, as well as have a
search function to nd other buddies based on their email address.
From this module, users can send a buddy request to someone they nd via
search.
Well also be able to look at all of our buddies beers, and add them to a list
of beers that we want to try in the future.
These are the main aspects of our application that we will need to visualize
and wireframe out.
12 CHAPTER 2. PROJECT PLANNING
If you need a refresher on how collections work in Meteor, be sure to check out
the Meteor guide on the subject.
Users
Our users collection will mainly be handled by the accounts-password package,
but well take advantage of the prole feature and have the following data in