-
Notifications
You must be signed in to change notification settings - Fork 15
Expand file tree
/
Copy path03-frameworks.html
More file actions
558 lines (472 loc) · 24.2 KB
/
Copy path03-frameworks.html
File metadata and controls
558 lines (472 loc) · 24.2 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CS 4970: 03-frameworks slide set</title>
<meta name="description" content="A set of slides for UVa's Service Learning Practicum course">
<meta name="author" content="Aaron Bloomfield">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
<link rel="stylesheet" href="../slides/reveal.js/css/reveal.css">
<link rel="stylesheet" href="../slides/reveal.js/css/theme/black.css" id="theme">
<link rel="stylesheet" href="../slides/css/slp.css">
<!-- Code syntax highlighting -->
<link rel="stylesheet" href="../slides/reveal.js/lib/css/zenburn.css">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? '../slides/reveal.js/css/print/pdf.css' : '../slides/reveal.js/css/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
<!--[if lt IE 9]>
<script src="../slides/reveal.js/lib/js/html5shiv.js"></script>
<![endif]-->
<script type="text/javascript" src="../slides/js/dhtmlwindow.js"></script>
<script type="text/javascript" src="../slides/js/canvas.js"></script>
<link rel="stylesheet" href="../slides/css/dhtmlwindow.css" type="text/css">
</head>
<body>
<div id="dhtmlwindowholder"><span style="display:none"></span></div>
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section data-markdown><script type="text/template">
# CS 4970
### Capstone Practicum I
<center><small>[Aaron Bloomfield](http://www.cs.virginia.edu/~asb) / [aaron@virginia.edu](mailto:aaron@virginia.edu) / [@bloomfieldaaron](http://twitter.com/bloomfieldaaron)</small></center>
<center><small>Repository: [github.com/aaronbloomfield/slp](http://github.com/aaronbloomfield/slp) / [↑](index.html) / <a href="03-frameworks.html?print-pdf"><img class="print" width="20" src="images/print-icon.png"></a></small></center>
## Web Frameworks
</script></section>
<section data-markdown><script type="text/template">
# Contents
[Introduction](/#intro)
[MySQL](/#mysql)
[CakePHP](/#cake)
[Ruby on Rails](/#rails)
[Python Django](/#django)
[Conclusions](/#conclusions)
</script></section>
<section>
<section data-markdown id="intro"><script type="text/template">
# Introduction
</script></section>
<section data-markdown><script type="text/template">
## Why require frameworks in this course?
- To prevent re-inventing the wheel
- Frameworks have a significant learning curve, but once learned they do much of the work for you
- This allows you to focus on *what* your web app does, and not focus so much on the low-level code
- You don't need to re-implement a linked list, so why re-implement all of the basic web app low-level stuff?
</script></section>
<section data-markdown><script type="text/template">
## But I want \[framekwork of choice\]!
- All of these systems have to run on my UVa server for the first part of the course
- It is not feasible to have each group pick a different framework, and then have me able to provide a reasonable hosting solution
- It makes this course much more sane if we are all on the same page…
- The chosen frameowrks represent a wide selection of what's out there
</script></section>
<section data-markdown><script type="text/template">
## Why some frameworks weren't chosen
- You can see one (of many) lists of the top frameworks a [hotframeworks.com](http://hotframeworks.com/)
- C#, .NET, ASP.NET, and ASP.NET MVC: they all require Windows servers, which costs money (even for education) and I don't use Windows, so I don't have the requisite knowledge to configure them
- node.js (and Meteor and Express, which are node.js in disguise): whie node.js is the "hot" thing, it's really focused on real-time applications that require a lot of throughput, asynchronous I/O, etc., none of which apply to our projects
</script></section>
<section data-markdown><script type="text/template">
## Why some frameworks weren't chosen
- AngularJS: the focus is on single-page web applications, which is not really what we are doing in this course
- CodeIgniter, Symfony, Laravel, and any other PHP framework: we already chose a PHP framework, so no need to have multiple ones
- Spring: it's Java, and getting a Java app working on a web server is just an exercise in frustration
- And those are the top web frameworks by popularity...
</script></section>
<section data-markdown><script type="text/template">
## Model-View-Controller
<img style="background-color:white" src="http://upload.wikimedia.org/wikipedia/commons/a/a0/MVC-Process.svg" alt="MVC image" title=""MVC-Process" by RegisFrey - Own work. Licensed under Public domain via Wikimedia Commons - http://commons.wikimedia.org/wiki/File:MVC-Process.svg#mediaviewer/File:MVC-Process.svg">
</script></section>
<section data-markdown><script type="text/template">
## Model
- Represents "knowledge"
- The fields of the (database) table, as well as their types
- Any validation necessary (this field is required, that field must be a number in this range, etc.)
- Relationships to other "things"
- A user has many posts
- A post has only one user
- A model represents the "application and business rules"
</script></section>
<section data-markdown><script type="text/template">
## View
- What the user sees
- In charge of formatting information for the user
- Formatting for a PC-based HTML page is different than a smartphone-based HTML page
- Displaying for an app will be even more different
- Some things may not be visible to all users (a user's real name may only be visible to that user and the administrators)
- Gets the information to view from the model, often through the controller
- May also update the model (last webpage access, for example), but that is done *through* the controller
</script></section>
<section data-markdown><script type="text/template">
## Controller
- Represents "action"
- These are the commands / functions / methods / etc. that a user can perform
- Perhaps through a form posting or a link
- A controller receives input, does some action, and displays the result through some view
- Data is read or written via the model
- Those "actions" correspond to methods called on the specified controller class
</script></section>
<section data-markdown><script type="text/template">
## Naming controllers and actions
- ALWAYS name the controllers and actions based on what they do, not based on the URL that you want them to have
- If you want specific URLs to go to specific places, you do this via *routes*
- I repeat: Don't try to name controllers and actions based on the URL that you want; it will only cause headaches later
</script></section>
</section>
<section>
<section data-markdown id="mysql"><script type="text/template">
# MySQL
</script></section>
<section data-markdown><script type="text/template">
## MySQL tables
- One of the first things you will be doing on your project is to create the database schema
- While it can certainly be modified later, creating a "more correct" one early on will save you a headache
- There are more than enough advice via a Google search
- What is listed here is a just a few to keep in mind, and ones that I came up with...
</script></section>
<section data-markdown><script type="text/template">
## Rule 1: Pick good table names
- Table names should be general enough to allow for easy use...
- Don't bother with separate "teachers" and "students" tables unless you have to; have a "people" or "users" with a "isTeacher" flag
- ... but specific enough to make sense from the table name
- "entities", "things" – what do these tables hold?
- Some table names are reserved in each framework, so be careful of those
</script></section>
<!-- - In Cake: emails, pages, scaffolds, layouts, errors, helpers, elements -->
<section data-markdown><script type="text/template">
## Rule 2: Don't mix concepts
- On one project in a previous year, they needed to keep track of individuals and organizations, and they keep track of them in the same Excel spreadsheet
- But an individual is not an organization
- So they should be in separate tables
</script></section>
<section data-markdown><script type="text/template">
## Rule 3: Recognize relationships
- Make sure you understand how a given table relates to anther table
- This means you will have to understand the various relationships:
- hasOne (one-to-one)
- hasMany (one-to-many)
- belongsTo (one-to-one or many-to-one)
- HABTM (many-to-many)
- They will be called different things in different frameworks
- And you will need to deal with foreign keys in the DB
</script></section>
<section data-markdown><script type="text/template">
## Rule 4: Create the tables properly
- With Cake, you need to have `id`, `modified`, and `created` fields
- For Rails, those fields are `id`, `created_on`, `updated_on`
- For Django, it is just `id`
- All tables need to be of the innodb type
</script></section>
<section data-markdown><script type="text/template">
## Rule 5: Let SQL handle cascading
- If a user has a bunch of posts, and you delete the user, what happens to the posts?
- Perhaps the user cannot be deleted until the posts are gone
- Perhaps all the posts are deleted
- Perhaps all the posts have their user_id set to null
- You can set this in MySQL through the "on update" or "on delete" command options
- ... on delete cascade
- ... on update restrict
- ... on delete set null
</script></section>
<section data-markdown><script type="text/template">
## Rule 6: Let MySQL handle the types
- If you properly choose the types when creating the schema (either in MySQL or through the framework), then life will be much easier
- Data is validated upon entry
- The frameworks will notice the type and allow you to perform additional validation
- Pick the correct type
- For something like a UVa userid (which is at most 6 characters), use varchar(6) rather than text
- Although varchar(7) wouuld allow for more room for expansion...
</script></section>
<section data-markdown><script type="text/template">
## Rule 7: Learn the framework queries
- The frameworks can perform advanced queries without needing any MySQL syntax
- But it takes some time to learn...
- For any non-trivial data extraction, you will need to learn this...
</script></section>
</section>
<section>
<section data-markdown id="cake"><script type="text/template">
# CakePHP
### (v. 3.x)
</script></section>
<section data-markdown><script type="text/template">
## Why CakePHP?
- There are MANY PHP frameworks out there
- [Wikipedia](http://en.wikipedia.org/wiki/PHP_frameworks#PHP) lists 23
- And that page doesn't list many of them!
- A few years ago, we did an evaluation of CakePHP versus a few others (Tonic and Recess), and everybody felt it was “better”
- It “gets out of your way”, has a reasonable learning curve, and requires minimal configuration
</script></section>
<section data-markdown><script type="text/template">
## Setting up CakePHP, part 1
- More details in the [CakePHP: Getting Started](../docs/cakephp-getting-started.html) page
- Choose a directory, such as `~/html/cakephp/`; the URL will then be `http://server/~user/cakephp/`
- Ensure [composer](https://getcomposer.org/) is installed (it is on the VirtualBox image and on the course server)
- See how to install it on the [VirtualBox image creation details](../docs/virtualbox-image-details.html) page
- Run (from ~/html):
```
composer create-project --prefer-dist cakephp/app cakephp
```
</script></section>
<section data-markdown><script type="text/template">
## Setting up CakePHP, part 2
- Change two .htaccess files: in `~/html/cakephp/` and `~/html/cakephp/webroot/`: add the line `RewriteBase /~user/cakephp` *before* the close `</IfModule>`
- Edit your database info in config/app.php
- It should work, and show all green check marks!
</script></section>
<section>
<h2>A successful CakePHP installation</h2>
<p>(Colors of the splash image and backgrounds may vary)</p>
<img class="stretch" src="../docs/images/cakephp-initial.png">
</section>
<section data-markdown><script type="text/template">
## Creating things
- With CakePHP, you first create the table in the database, then create the MVC components around that
- Some things to remember:
- Always have an `id int unsigned auto_increment primary key` as your first field
- Always include a `created datetime default null` and `modified datetime default null` as fields as well
- Note that keywords in MySQL are case-insensitive, but user-defined identifiers are not!
</script></section>
<section data-markdown><script type="text/template">
## Relationships
- Foreign keys in a DB are used for hasOne (one-to-one), hasMany (one-to-many), and belongsTo (one-to-one or many-to-one) relationships
- If this_table has a foreign key of another_table, then this_table either hasOne or belongsTo another_table (you can choose)
- Likewise, another_table either hasMany or belongsTo this_table (again, your choice)
- Separate tables are needed for HABTM (many-to-many) relationships
</script></section>
<section data-markdown><script type="text/template">
## Plurality and Inflection
- Models are alwasy singular case ("Post.php", "Report.php")
- Controllers are always plural case ("PostsController.php", "ReportsController.php")
- Unrelated: views always end in ".ctp" for "Cake TemPlate"
- CakePHP has an *inflector*, which can singularize or pluraize nouns as necessary
- Common non-standard nouns work as well: Person -> People
</script></section>
</section>
<section>
<section data-markdown id="rails"><script type="text/template">
# Ruby on Rails
### (Ruby v. 2.3.2; Rails v. 4.2.6)
</script></section>
<section data-markdown><script type="text/template">
## Why Ruby on Rails?
- It's a very popular framework
- Many popular sites are built on Ruby, including github
- The very large amount of libraries (gems), which are relatively easy to install and use, make it very easy to add a lot of functionatlity very easily
</script></section>
<section data-markdown><script type="text/template">
## Setting up Ruby on Rails
- Everything needed is installed on the VirtualBox image
- The following command will create the directory structure needed:
```
rails new myapp -d mysql
```
- Edit `config/database.yml`, and enter your MySQL information (up to 3 times for each field!)
- On VirtualBox, you can run `rails server`, and then view the web page via `http://localhost:3000`
- On the course server, you have to follow the instructions on the [Ruby on Rails: Getting Started page](../docs/rubyrails-getting-started.html) ([md](../docs/rubyrails-getting-started.md))
</script></section>
<section>
<h2>A successful Ruby on Rails installation</h2>
<img class="stretch" src="../docs/images/rails-initial.png">
</section>
<section data-markdown><script type="text/template">
## Creating things
- With Rails, you tell the framework that you want to create a table/model:
```
bin/rails generate model Article title:string text:text
```
- You then *migrate* your changes to the DB, which is what creates (or modifies) the tables:
```
bin/rake db:migrate
```
The [ActiveRecord::Timestamp](http://api.rubyonrails.org/classes/ActiveRecord/Timestamp.html) API allows for `created_on` and `updated_on` fields
- ActiveRecord is the gem, Timestamp is the functionaliy
</script></section>
<section data-markdown><script type="text/template">
## Relationships
- The ActiveRecord gem, in the [Association API](http://guides.rubyonrails.org/association_basics.html) manages relationships, similar to what CakePHP has
- has_one
- has_many
- belongs_to
- has_and_belongs_to_many
- It also defines *through* modifiers to has_many and has_one, indicating a 3rd model is between
- A person has_many grandparents *through* their parents
</script></section>
<section data-markdown><script type="text/template">
## Plurality and Inflection
- Models use a singular name ("post")
- Database tables use a plural name ("posts")
</script></section>
</section>
<section>
<section data-markdown id="django"><script type="text/template">
# Python Django
### (Python3 v. 3.5.2, Django v. 1.10)
</script></section>
<section data-markdown><script type="text/template">
## Why Django?
- Python is a very nice language to program in
- Django is a very popular frameowrk
- Many of you see it in CS 3240
- I wanted to add a 3rd framework choice a few years ago
</script></section>
<section data-markdown><script type="text/template">
## Setting up Django
- Everything needed is installed on the VirtualBox image
- The following command will create the directory structure needed:
```
django-admin startproject mysite
```
- Edit `mysite/mysite/settings.py`, and enter your MySQL information (and change the time zone)
- To set up the DB tables, run the commands listed on [page 1 of the Django tutorial](https://docs.djangoproject.com/en/1.8/intro/tutorial01/#activating-models)
- On VirtualBox, you can run `python manage.py runserver`, and view the web page via the URL printed
- On the course server, you have to follow the instructions on the [Django: Getting Started page](../docs/django-getting-started.html) ([md](../docs/django-getting-started.md))
</script></section>
<section data-markdown><script type="text/template">
## Configuring Django on the server
- You must use the `wsgi-admin` utility, as described in the [Django: Getting Started page](../docs/django-getting-started.html) ([md](../docs/django-getting-started.md))
- Usage overview:
```
wsgi-admin -register <wsgi_file>
```
```
wsgi-admin -list
```
```
wsgi-admin -remove <id>
```
```
wsgi-admin -regerate
```
</script></section>
<section data-markdown><script type="text/template">
## Configuring Django on the server, part 2
- Specifically, to register your project:
```
wsgi-admin -register -file mysite/mysite/wsgi.py
```
- Where "mysite/mysite/wsgi.py" is the (only) wsgi.py file in the project you created
- Note that you can only have one project registered at a time; you will have to remove the old one to register a new one
- For your projects, there is more details to register; I'll help you with that when the time comes
</script></section>
<section>
<h2>A successful Django installation</h2>
<img class="stretch" src="../docs/images/django-initial.png">
</section>
<section data-markdown><script type="text/template">
## Projects versus Apps
- So far, what has been created is a *project*
- You will also need to create one or more *apps*
> What's the difference between a project and an app? An app is a Web application that does something – e.g., a Weblog system, a database of public records or a simple poll app. A project is a collection of configuration and apps for a particular Web site. A project can contain multiple apps. An app can be in multiple projects.
</script></section>
<section data-markdown><script type="text/template">
## Creating things
- The structure for a model is created in a Python file (`polls/models.py`, for example)
- It's a specific Python syntax for a class
- You have to first *migrate* the changes
- Meaning you tell Django to figure out what changes to make to the DB (including creating new tables)
- You then can either print them or write those changes to the DB
- See [page 1 of the Django tutorial](https://docs.djangoproject.com/en/1.8/intro/tutorial01/#activating-models) for the details of those commands
</script></section>
<section data-markdown><script type="text/template">
## Relationships
- Django has similar relationships as the others
- For each, there is a particular keyword used in the field declaration
- One-to-one: use `OneToOneField`
- Many-to-one: use `ForeignKey`
- Many-to-many: use `ManyToManyField`
- Note that belongs-to is implicit, and thus not explicitly defined
</script></section>
<section data-markdown><script type="text/template">
## Plurality and Inflection
- Django does not require singular and plurality like the other frameworks do
- But if you don't follow the convention, you have to separately define what the singular name and plural name are for each field!
</script></section>
</section>
<section>
<section data-markdown id="conclusions"><script type="text/template">
# Conclusions
</script></section>
<section data-markdown><script type="text/template">
## Survey Framework Questions
- Last year, all three frameworks were used (albeit earlier versions)
- The year before, only CakePHP and Rails (no Django)
- In the last two end-of-year surveys, students were asked two framework questions:
- What is your overall opinion of the framework you used (CakePHP or Rails [or Django])?
- Overall, how satisfied were you with the framework that you chose to work with?
- Answers were on a 1-5 scale (1 = very unsatisifed, 3 = neutral, 5 = very satisfied)
</script></section>
<section data-markdown><script type="text/template">
## Survey Framework Results, 2014
This is from the 2013-2014 academic year, which means these results were completed in May, 2014
| | CakePHP | Rails |
|--|--|--|
| Framework opinion | 4.49 | 4.01 |
| Framework satisfaction | 4.40 | 3.86 |
| Number of surveys | 13 | 26 |
</script></section>
<section data-markdown><script type="text/template">
## Survey Framework Results, 2015
This is from the 2014-2015 academic year, which means these results were completed in May, 2015
| | CakePHP | Rails | Django |
|--|--|--|--|
| Framework opinion | 3.52 | 3.84 | 4.65 |
| Framework satisfaction | 3.64 | 3.88 | 4.54 |
| Number of surveys | 25 | 32 | 37 |
</script></section>
<section data-markdown><script type="text/template">
## Survey Framework Results, 2016
This is from the 2015-2016 academic year, which means these results were completed in May, 2016
| | CakePHP | Rails | Django |
|--|--|--|--|
| Framework opinion | 3.08 | N/A | 4.54 |
| Framework satisfaction | 3.00 | N/A | 4.57 |
| Number of surveys | 13 | 0 | 46 |
</script></section>
<section data-markdown><script type="text/template">
## Upcoming survey questions
- For each framework, you will rate your interest from 1-5 (phrasing may vary):
1. I really DESPISE this framework, and would be very unhappy using it
2. I would rather not use this framework, but it wouldn't be the end of the world if I used it
3. I am neutral about using this framework
4. I would like to use this framework, and would be happy using it
5. I am a FANATIC about this framework, and would be ecstatic using it
- If you enter 3's for the three framework prompts, I'll assume you don't care about which framework you use
</script></section>
<section data-markdown><script type="text/template">
## What *not* to base your framework preference on
- The learning curve: they all have learning curves, so that's a wash
- The fact that you may have learned one in CS 3240
- What you learned there won't make *that* much of a difference in the long run
- What is the *hot* framework of the day: some groups have gotten burned because of this
- What your friend told you you should use
- How hard it is to configure
- I'm doing that on the course server for you, and it's only a one-time thing, anyway
</script></section>
<section data-markdown><script type="text/template">
## What you *should* base your framework preference on
- A desire to learn a particular language or framework
- Existing knowledge or experience using a particular framework (beyond CS 3240)
- Your experiences with the frameworks homework
- But take them with a grain of salt -- it's not like none of the frameworks will cause you frustration ever
</script></section>
</section>
</div>
</div>
<script src="../slides/reveal.js/lib/js/head.min.js"></script>
<script src="../slides/reveal.js/js/reveal.js"></script>
<script src="../slides/js/settings.js"></script>
</body>
</html>