- Building Single:page Web Apps with Meteor
- Fabian Vogelsteller
- 660字
- 2021-08-06 19:29:37
Writing templates in Meteor
Normally when we build websites, we build the complete HTML on the server side. This was quite straightforward; every page is built on the server, then it is sent to the client, and at last JavaScript added some additional animation or dynamic behavior to it.
This is not so in single-page apps, where every page needs to be already in the client's browser so that it can be shown at will. Meteor solves this problem by providing templates that exists in JavaScript and can be placed in the DOM at some point. These templates can have nested templates, allowing for an easy way to reuse and structure an app's HTML layout.
Since Meteor is so flexible in terms of folder and file structure, any *.html
page can contain a template and will be parsed during Meteor's build process. This allows us to put all templates in the my-meteor-blog/client/templates
folder, which we created in the Chapter 1, Getting Started with Meteor. This folder structure is chosen as it helps us organizing templates when our app grows.
Meteor's template engine is called Spacebars, which is a derivative of the handlebars template engine. Spacebars is built on top of Blaze, which is Meteor's reactive DOM update engine.
Note
Blaze can generate reactive HTML directly using its API, though it's more convenient to use Meteor's Spacebars or a third-party template language built on top of Blaze such as Jade for Meteor.
For more detail about Blaze, visit https://docs.meteor.com/#/full/blaze and https://github.com/mquandalle/meteor-jade.
What makes Spacebars so exciting is its simplicity and reactivity. Reactive templates mean that some parts of the template can automatically change when the underlying data changes. There is no need of manual DOM manipulation and inconsistent interfaces belong to the past. To get a better understanding of Meteor, we will start with the basic HTML files for our app:
- Let's create an
index.html
file in ourmy-meteor-blog/client
folder with the following lines of code:<head> <title>My Meteor Blog</title> </head> <body> Hello World </body>
- Next, we run our Meteor app from the command line by typing the following command:
$ cd my-meteor-blog $ meteor
This will start a Meteor server with our app running.
- That's it! We can open our browser, navigate to
http://localhost:3000
, and we should see Hello World.
What happens here is that Meteor will look through all the HTML files available in our app's folder, concatenating the content of all <head>
and <body>
tags, which it finds and serve them to the clients as its index file.
If we take a look at the source code of our app, we will see that the <body>
tag is empty. This is because Meteor sees the content of the <body>
tag as its own templates, which will be injected with its corresponding JavaScript template when the DOM is loaded.
We will also see that Meteor already linked all kinds of JavaScript files in our <head>
tag. These are Meteor's core packages and our add third-party packages. In production, these files will be concatenated into one. To see this in action, go to the terminal, quit our running Meteor server using Ctrl + C, and run the following command:
$ meteor --production
If we now take a look at the source code, we will see that there is only one cryptic-looking JavaScript file linked.
For the next steps, it is better to go back to our developer mode by simply quitting Meteor and running the meteor
command again, since this will reload the app faster when file changes occur.
- Advanced Machine Learning with Python
- 深入理解Bootstrap
- 大學計算機應用基礎實踐教程
- DevOps for Networking
- Learning C++ Functional Programming
- Python神經網絡項目實戰
- Python程序設計案例教程
- 深度強化學習算法與實踐:基于PyTorch的實現
- 精通Linux(第2版)
- Mastering JBoss Enterprise Application Platform 7
- Scientific Computing with Scala
- 零基礎入門學習Python(第2版)
- Java網絡編程核心技術詳解(視頻微課版)
- Julia 1.0 Programming Complete Reference Guide
- ASP.NET Core and Angular 2