You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/tutorial/todo.md
+19-29Lines changed: 19 additions & 29 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,13 +1,13 @@
1
1
2
-
# TodoMVC Tutorial (Rails 5.2.0)
2
+
# TodoMVC Tutorial (Rails 5.2.x)
3
3
4
4
### Prerequisites
5
5
6
6
{ [Ruby On Rails](http://rubyonrails.org/) }
7
7
8
8
### The Goals of this Tutorial
9
9
10
-
In this tutorial you will build the classic [TodoMVC](http://todomvc.com) application using Hyperloop
10
+
In this tutorial, you will build the classic [TodoMVC](http://todomvc.com) application using Hyperloop. This tutorial will demonstrate all Hyperloop concepts - client side Components and Isomorphic Models.
11
11
12
12
The finished application will
13
13
@@ -20,35 +20,23 @@ The finished application will
20
20
21
21
You will write less than 100 lines of code, and the tutorial should take about 1-2 hours to complete.
22
22
23
-
You can find the older application source code here:
24
-
25
23
### Skills required
26
24
27
25
Working knowledge of Rails required
28
26
29
-
#### Pre-Requisites
30
-
31
-
+ Yarn must be installed (https://yarnpkg.com/en/docs/install#mac-stable)
32
-
33
27
### Chapter 1: Setting Things Up
34
28
35
-
Simply run the command below to create a new Rails app with Hyperstack all configured:
36
-
37
-
```
38
-
rails new MyApp -m https://rawgit.com/hyperstack-org/hyperstack/edge/install/rails-webpacker.rb
39
-
```
29
+
1)`rails new MyApp`
30
+
2)`cd MyApp` directory
31
+
3) add `gem 'hyperloop'` to the Gemfile
32
+
4)`bundle install`
33
+
5)`run rails g hyperloop:install`
40
34
41
35
#### Start the Rails app
42
36
43
-
+`foreman start` to start Rails and OpalHotReloader
44
-
+ Navigate to `http://localhost:5000/`
37
+
+`bundle exec foreman start` to start Rails and OpalHotReloader
45
38
46
-
Run foreman
47
-
```ruby
48
-
$ foreman start
49
-
```
50
-
51
-
Navigate to the given location and you should see the word **App** displayed on the page.
39
+
Navigate to `http://localhost:5000/` and you should see the word **App** displayed on the page.
52
40
53
41
### Chapter 2: Hyperloop Models are Rails Models
54
42
@@ -58,11 +46,11 @@ We are going to add our Todo Model, and discover that Hyperloop models are in fa
58
46
+ Changes to models on the server are synchronized with all participating browsers.
59
47
+ Data access is is protected by a robust *policy* mechanism.
60
48
61
-
>*A Rails ActiveRecord Model is a Ruby class that is backed by a database table. In this example we will have one model class called `Todo`. When manipulating models, Rails automatically generates the necessary SQL code for you. So when `Todo.all` is evaluated Rails generates the appropriate SQL
62
-
and turns the result of the query into appropriate Ruby data structures.*
49
+
>A Rails ActiveRecord Model is a Ruby class that is backed by a database table. In this example we will have one model class called `Todo`. When manipulating models, Rails automatically generates the necessary SQL code for you. So when `Todo.all` is evaluated Rails generates the appropriate SQL
50
+
and turns the result of the query into appropriate Ruby data structures.
63
51
64
-
>*Hyperloop Models are extensions of ActiveRecord Models that synchronize the data between the client and server
65
-
automatically for you. So now `Todo.all` can be evaluated on the server or the client.*
52
+
**Hyperloop Models are extensions of ActiveRecord Models that synchronize the data between the client and server
53
+
automatically for you. So now `Todo.all` can be evaluated on the server or the client.**
66
54
67
55
Okay lets see it in action:
68
56
@@ -91,11 +79,13 @@ Okay lets see it in action:
91
79
which will create the table.
92
80
93
81
2.**Make Some Models Public:**
94
-
*Move*`models/todo.rb` and `models/application_record.rb` to `hyperloop/models`.
95
82
96
-
This will make the model accessible on the clients *and the server*, subject to any data access policies.
83
+
+*Move*`models/todo.rb` to `hyperloop/models`
84
+
+ Stop and restart your rails server
85
+
86
+
This will make the model accessible on the clients *and the server*, subject to any data access policies.
97
87
98
-
*Note: The hyperloop installer adds a policy that gives full permission to all clients but only in development and test modes. Have a look at `app/policies/application_policy` if you are interested.*
88
+
*Note: The hyperloop installer adds a policy that gives full permission to all clients but only in development and test modes. Have a look at `app/policies/application_policy` if you are interested.*
99
89
100
90
3.**Try It**
101
91
Change your `App` component's render method to:
@@ -927,4 +917,4 @@ end
927
917
928
918
3: Its possible to get things so messed up the hot-reloader will not work. Restart the server and reload the browser.
929
919
930
-
You can find the final application source code here:
920
+
4: Reach out to us on Gitter, we are always happy to help get you onboarded!
0 commit comments