├── LICENSE.md ├── README.md ├── completed-projects ├── bb-todo │ ├── css │ │ ├── bootstrap-theme.css │ │ ├── bootstrap-theme.css.map │ │ ├── bootstrap-theme.min.css │ │ ├── bootstrap.css │ │ ├── bootstrap.css.map │ │ ├── bootstrap.min.css │ │ └── style.css │ ├── fonts │ │ ├── glyphicons-halflings-regular.eot │ │ ├── glyphicons-halflings-regular.svg │ │ ├── glyphicons-halflings-regular.ttf │ │ └── glyphicons-halflings-regular.woff │ ├── img │ │ └── backbone.png │ ├── index.html │ └── js │ │ ├── app.js │ │ ├── backbone.js │ │ ├── jquery-2.0.2.js │ │ ├── models.js │ │ ├── router.js │ │ ├── underscore.js │ │ └── views.js ├── emb-todo │ ├── css │ │ ├── bootstrap-theme.min.css │ │ ├── bootstrap.min.css │ │ └── style.css │ ├── fonts │ │ ├── glyphicons-halflings-regular.eot │ │ ├── glyphicons-halflings-regular.svg │ │ ├── glyphicons-halflings-regular.ttf │ │ └── glyphicons-halflings-regular.woff │ ├── img │ │ └── ember.png │ ├── index.html │ └── js │ │ ├── app.js │ │ ├── components.js │ │ ├── controllers.js │ │ ├── ember-data.js │ │ ├── ember.js │ │ ├── fixtures.js │ │ ├── handlebars-v1.2.1.js │ │ ├── jquery-2.0.2.js │ │ ├── models.js │ │ └── router.js ├── ng-todo │ ├── css │ │ ├── bootstrap-theme.css │ │ ├── bootstrap-theme.css.map │ │ ├── bootstrap-theme.min.css │ │ ├── bootstrap.css │ │ ├── bootstrap.css.map │ │ ├── bootstrap.min.css │ │ └── style.css │ ├── fonts │ │ ├── glyphicons-halflings-regular.eot │ │ ├── glyphicons-halflings-regular.svg │ │ ├── glyphicons-halflings-regular.ttf │ │ └── glyphicons-halflings-regular.woff │ ├── img │ │ └── AngularJS.png │ ├── index.html │ └── js │ │ ├── angular.min.js │ │ ├── app.js │ │ ├── directives.js │ │ ├── filters.js │ │ └── ngTodoCtrl.js ├── react-todo │ ├── css │ │ ├── bootstrap-theme.css │ │ ├── bootstrap-theme.css.map │ │ ├── bootstrap-theme.min.css │ │ ├── bootstrap.css │ │ ├── bootstrap.css.map │ │ ├── bootstrap.min.css │ │ └── style.css │ ├── fonts │ │ ├── glyphicons-halflings-regular.eot │ │ ├── glyphicons-halflings-regular.svg │ │ ├── glyphicons-halflings-regular.ttf │ │ └── glyphicons-halflings-regular.woff │ ├── img │ │ └── react.png │ ├── index.html │ └── js │ │ ├── JSXTransformer.js │ │ ├── app.jsx │ │ ├── components.jsx │ │ ├── fixtures.js │ │ └── react-with-addons.js └── vue-todo │ ├── css │ ├── bootstrap-theme.css │ ├── bootstrap-theme.css.map │ ├── bootstrap-theme.min.css │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ └── style.css │ ├── fonts │ ├── glyphicons-halflings-regular.eot │ ├── glyphicons-halflings-regular.svg │ ├── glyphicons-halflings-regular.ttf │ └── glyphicons-halflings-regular.woff │ ├── img │ └── vue.png │ ├── index.html │ └── js │ ├── app.js │ └── vue.js ├── empty-projects ├── bb-todo │ ├── css │ │ ├── bootstrap-theme.css │ │ ├── bootstrap-theme.css.map │ │ ├── bootstrap-theme.min.css │ │ ├── bootstrap.css │ │ ├── bootstrap.css.map │ │ ├── bootstrap.min.css │ │ └── style.css │ ├── fonts │ │ ├── glyphicons-halflings-regular.eot │ │ ├── glyphicons-halflings-regular.svg │ │ ├── glyphicons-halflings-regular.ttf │ │ └── glyphicons-halflings-regular.woff │ ├── img │ │ └── backbone.png │ ├── index.html │ └── js │ │ ├── app.js │ │ ├── backbone.js │ │ ├── jquery-2.0.2.js │ │ ├── models.js │ │ ├── router.js │ │ ├── underscore.js │ │ └── views.js ├── emb-todo │ ├── css │ │ ├── bootstrap-theme.min.css │ │ ├── bootstrap.min.css │ │ └── style.css │ ├── fonts │ │ ├── glyphicons-halflings-regular.eot │ │ ├── glyphicons-halflings-regular.svg │ │ ├── glyphicons-halflings-regular.ttf │ │ └── glyphicons-halflings-regular.woff │ ├── img │ │ └── ember.png │ ├── index.html │ └── js │ │ ├── app.js │ │ ├── components.js │ │ ├── controllers.js │ │ ├── ember-data.js │ │ ├── ember.js │ │ ├── fixtures.js │ │ ├── handlebars-v1.2.1.js │ │ ├── jquery-2.0.2.js │ │ ├── models.js │ │ └── router.js ├── ng-todo │ ├── css │ │ ├── bootstrap-theme.css │ │ ├── bootstrap-theme.css.map │ │ ├── bootstrap-theme.min.css │ │ ├── bootstrap.css │ │ ├── bootstrap.css.map │ │ ├── bootstrap.min.css │ │ └── style.css │ ├── fonts │ │ ├── glyphicons-halflings-regular.eot │ │ ├── glyphicons-halflings-regular.svg │ │ ├── glyphicons-halflings-regular.ttf │ │ └── glyphicons-halflings-regular.woff │ ├── img │ │ └── AngularJS.png │ ├── index.html │ └── js │ │ ├── angular.min.js │ │ ├── app.js │ │ ├── directives.js │ │ ├── filters.js │ │ └── ngTodoCtrl.js ├── react-todo │ ├── css │ │ ├── bootstrap-theme.css │ │ ├── bootstrap-theme.css.map │ │ ├── bootstrap-theme.min.css │ │ ├── bootstrap.css │ │ ├── bootstrap.css.map │ │ ├── bootstrap.min.css │ │ └── style.css │ ├── fonts │ │ ├── glyphicons-halflings-regular.eot │ │ ├── glyphicons-halflings-regular.svg │ │ ├── glyphicons-halflings-regular.ttf │ │ └── glyphicons-halflings-regular.woff │ ├── img │ │ └── react.png │ ├── index.html │ └── js │ │ ├── JSXTransformer.js │ │ ├── app.jsx │ │ ├── components.jsx │ │ ├── fixtures.js │ │ └── react-with-addons.js └── vue-todo │ ├── css │ ├── bootstrap-theme.css │ ├── bootstrap-theme.css.map │ ├── bootstrap-theme.min.css │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ └── style.css │ ├── fonts │ ├── glyphicons-halflings-regular.eot │ ├── glyphicons-halflings-regular.svg │ ├── glyphicons-halflings-regular.ttf │ └── glyphicons-halflings-regular.woff │ ├── img │ └── vue.png │ ├── index.html │ └── js │ ├── app.js │ └── vue.js ├── presenters-notes ├── angular.md ├── bb.md ├── ember.md ├── overview.md ├── react.md └── vue.md └── slides ├── css ├── font-awesome-ie7.min.css ├── font-awesome.css ├── font-awesome.min.css ├── print │ ├── paper.css │ └── pdf.css ├── reveal.css ├── reveal.min.css └── theme │ ├── README.md │ ├── beige.css │ ├── default.css │ ├── moon.css │ ├── night.css │ ├── serif.css │ ├── simple.css │ ├── sky.css │ ├── solarized.css │ ├── source │ ├── beige.scss │ ├── default.scss │ ├── moon.scss │ ├── night.scss │ ├── serif.scss │ ├── simple.scss │ ├── sky.scss │ └── solarized.scss │ └── template │ ├── mixins.scss │ ├── settings.scss │ └── theme.scss ├── font ├── FontAwesome.otf ├── fontawesome-webfont.eot ├── fontawesome-webfont.svg ├── fontawesome-webfont.ttf └── fontawesome-webfont.woff ├── img ├── aquilafiera-steveholt.png ├── aquilafiera.png ├── butwait.jpg ├── crazycode.png ├── luna.jpg ├── mexicanstandoff.png ├── reddit-logo.png ├── redditgifts.png └── secret.gif ├── index.html ├── js ├── reveal.js └── reveal.min.js ├── lib ├── css │ └── zenburn.css ├── font │ ├── league_gothic-webfont.eot │ ├── league_gothic-webfont.svg │ ├── league_gothic-webfont.ttf │ ├── league_gothic-webfont.woff │ └── league_gothic_license └── js │ ├── classList.js │ ├── head.min.js │ └── html5shiv.js ├── package.json └── plugin ├── highlight └── highlight.js ├── markdown ├── example.html ├── example.md ├── markdown.js └── marked.js ├── multiplex ├── client.js ├── index.js └── master.js ├── notes-server ├── client.js ├── index.js └── notes.html ├── notes ├── notes.html └── notes.js ├── postmessage ├── example.html └── postmessage.js ├── print-pdf └── print-pdf.js ├── remotes └── remotes.js ├── search └── search.js └── zoom-js └── zoom.js /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Brian Holt 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # JavaScript Showdown: Choosing Between Angular, Ember, React, and Backbone. 2 | 3 | ## Presented 4 | 5 | - [Fluent Conf 2014](http://fluentconf.com/fluent2014/public/schedule/detail/31870) 6 | - [OpenWest 2014](http://www.openwest.org/) 7 | - [Frontend Masters](https://frontendmasters.com/workshops/javascript-framework-showdown/) 8 | - [Web Unleashed 2014](http://fitc.ca/speaker/brian-holt/?event=15315) 9 | 10 | ## Layout 11 | 12 | There are four folders. 13 | 14 | - The `completed-projects` folder contains all four projects with complete code. 15 | - The `empty-projects` folder contains all the projects with none of the logic but all the HTML, CSS, and the JS libraries ready to go. 16 | - The `presentation-notes` contains all my notes that I use as I go through coding the projects. They are intended to be easy-to-follow so that you could recreate the talk without my speaking. 17 | - The `slides` directory is where the reveal.js presentation lives. 18 | 19 | ## Abbreviated Version 20 | 21 | There is an abbreviated version I will give at Web Unleashed 2014. The notes are in [presenters-notes/overview.md](presenters-notes/overview.md). The slides for it are on my [SpeakerDeck](https://speakerdeck.com/btholt/javascript-framework-showdown-abbreviated). 22 | 23 | ## Development 24 | 25 | Please feel free to look over the repos. I'll be developing them bit by bit as I present it multiple times. If you see errors, feel free to fork-and-fix or leave an issue. 26 | 27 | ## License 28 | 29 | This repo contains multiple libraries and images that each have their own license. For what code I've written it's all open sourced under the MIT license. 30 | -------------------------------------------------------------------------------- /completed-projects/bb-todo/css/style.css: -------------------------------------------------------------------------------- 1 | .outer-container { 2 | width: 80%; 3 | margin: 10px auto; 4 | } 5 | 6 | .finished { 7 | text-decoration: line-through; 8 | color: lightgray; 9 | font-style: italic; 10 | } 11 | 12 | .input-group { 13 | margin: 10px 0; 14 | } 15 | 16 | .add-todo-group { 17 | margin-bottom: 30px; 18 | } 19 | 20 | .btn-clear-group { 21 | margin-top: 30px; 22 | text-align: right; 23 | } 24 | 25 | .navbar-img { 26 | margin-top: 13px; 27 | } 28 | 29 | .navbar-img img { 30 | height: 35px; 31 | background-color: rgba(255,255,255,0.2); 32 | border-radius: 5px; 33 | padding: 2px 5px; 34 | position: relative; 35 | top: -7px; 36 | } 37 | 38 | .navbar { 39 | border-radius: 0; 40 | } -------------------------------------------------------------------------------- /completed-projects/bb-todo/fonts/glyphicons-halflings-regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/btholt/jsmvc-pres/9aa87ab4ce7d2e13c3edd67128fa7105e8404e3b/completed-projects/bb-todo/fonts/glyphicons-halflings-regular.eot -------------------------------------------------------------------------------- /completed-projects/bb-todo/fonts/glyphicons-halflings-regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/btholt/jsmvc-pres/9aa87ab4ce7d2e13c3edd67128fa7105e8404e3b/completed-projects/bb-todo/fonts/glyphicons-halflings-regular.ttf -------------------------------------------------------------------------------- /completed-projects/bb-todo/fonts/glyphicons-halflings-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/btholt/jsmvc-pres/9aa87ab4ce7d2e13c3edd67128fa7105e8404e3b/completed-projects/bb-todo/fonts/glyphicons-halflings-regular.woff -------------------------------------------------------------------------------- /completed-projects/bb-todo/img/backbone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/btholt/jsmvc-pres/9aa87ab4ce7d2e13c3edd67128fa7105e8404e3b/completed-projects/bb-todo/img/backbone.png -------------------------------------------------------------------------------- /completed-projects/bb-todo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | bb-todo 6 | 7 | 8 | 9 | 10 | 11 | 17 | 18 |
19 |
20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 30 | 31 |
32 | 33 |
34 | 35 |
36 | 37 |
38 |
39 |
40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /completed-projects/bb-todo/js/app.js: -------------------------------------------------------------------------------- 1 | $(function(){ TodoApp.start() }); -------------------------------------------------------------------------------- /completed-projects/bb-todo/js/models.js: -------------------------------------------------------------------------------- 1 | window.TodoItem = Backbone.Model.extend({ 2 | toggle: function() { 3 | this.set('completed', !this.get('completed')); 4 | }, 5 | updateText: function(text) { 6 | this.set('val', text); 7 | } 8 | }); 9 | 10 | window.TodoItems = Backbone.Collection.extend({ 11 | model: TodoItem, 12 | 13 | initialize: function(){ 14 | this.on('destroy', this.removeElement, this); 15 | }, 16 | 17 | removeElement: function(model){ 18 | this.remove(model); 19 | }, 20 | 21 | filterCompleted: function() { 22 | this.remove(this.filter(function(item) { 23 | return item.get('completed'); 24 | })); 25 | } 26 | }); -------------------------------------------------------------------------------- /completed-projects/bb-todo/js/router.js: -------------------------------------------------------------------------------- 1 | window.TodoApp = new (Backbone.Router.extend({ 2 | routes: {'':'index'}, 3 | initialize: function() { 4 | this.todoItems = new TodoItems(); 5 | this.todosView = new TodosView({collection: this.todoItems}); 6 | this.todosView.render(); 7 | 8 | $('.btn-success').click(function() { 9 | window.TodoApp.todoItems.add({val:$("#newTodo").val(), completed: false}); 10 | $("#newTodo").val(''); 11 | }); 12 | 13 | $('.btn-clear').click(function() { 14 | window.TodoApp.todosView.filterCompleted(); 15 | }); 16 | 17 | }, 18 | index: function() { 19 | var fixtures = [ 20 | {val: 'Learn Backbone.js', completed:true}, 21 | {val: 'Look at cat pictures', completed: true}, 22 | {val: 'Also, puppies', completed: false}, 23 | {val: 'Choose an MVC', completed: false}, 24 | {val: 'Hear some rad presenters', completed: true} 25 | ]; 26 | $('#app').html(this.todosView.el); 27 | this.todoItems.reset(fixtures); 28 | }, 29 | start: function() { 30 | Backbone.history.start(); 31 | } 32 | })); -------------------------------------------------------------------------------- /completed-projects/bb-todo/js/views.js: -------------------------------------------------------------------------------- 1 | window.TodoView = Backbone.View.extend({ 2 | template: _.template(' type="checkbox">" type="text">'), 3 | events: { 4 | 'change input[type=checkbox]' : 'toggle', 5 | 'change .form-control' : 'update', 6 | 'click .btn-danger' : 'remove' 7 | }, 8 | initialize: function(){ 9 | this.model.on('change', this.render, this); 10 | }, 11 | render: function(){ 12 | this.$el.html(this.template(this.model.toJSON())); 13 | return this; 14 | }, 15 | remove: function(){ 16 | this.model.destroy(); 17 | }, 18 | update: function() { 19 | this.model.updateText(this.$('.form-control').val()); 20 | }, 21 | toggle: function() { 22 | this.model.toggle(); 23 | }, 24 | className: 'input-group input-group-lg' 25 | 26 | }); 27 | 28 | window.TodosView = Backbone.View.extend({ 29 | initialize: function(){ 30 | this.collection.on('add', this.addOne, this); 31 | this.collection.on('reset', this.addAll, this); 32 | this.collection.on('destroy', this.render, this); 33 | }, 34 | 35 | render: function(){ 36 | this.addAll() 37 | return this; 38 | }, 39 | 40 | addAll: function(){ 41 | this.$el.empty(); 42 | this.collection.forEach(this.addOne, this); 43 | }, 44 | 45 | addOne: function(todoItem){ 46 | var todoView = new TodoView({model: todoItem}); 47 | this.$el.append(todoView.render().el); 48 | }, 49 | 50 | filterCompleted: function() { 51 | this.collection.filterCompleted(); 52 | this.render(); 53 | } 54 | }); -------------------------------------------------------------------------------- /completed-projects/emb-todo/css/style.css: -------------------------------------------------------------------------------- 1 | .outer-container { 2 | width: 80%; 3 | margin: 10px auto; 4 | } 5 | 6 | .finished { 7 | text-decoration: line-through; 8 | color: lightgray; 9 | font-style: italic; 10 | } 11 | 12 | .input-group { 13 | margin: 10px 0; 14 | } 15 | 16 | .add-todo-group { 17 | margin-bottom: 30px; 18 | } 19 | 20 | .btn-clear-group { 21 | margin-top: 30px; 22 | text-align: right; 23 | } 24 | 25 | .navbar-img { 26 | margin-top: 4px; 27 | } 28 | 29 | .navbar-img img { 30 | height: 38px; 31 | } 32 | 33 | .navbar { 34 | border-radius: 0; 35 | } 36 | 37 | -------------------------------------------------------------------------------- /completed-projects/emb-todo/fonts/glyphicons-halflings-regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/btholt/jsmvc-pres/9aa87ab4ce7d2e13c3edd67128fa7105e8404e3b/completed-projects/emb-todo/fonts/glyphicons-halflings-regular.eot -------------------------------------------------------------------------------- /completed-projects/emb-todo/fonts/glyphicons-halflings-regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/btholt/jsmvc-pres/9aa87ab4ce7d2e13c3edd67128fa7105e8404e3b/completed-projects/emb-todo/fonts/glyphicons-halflings-regular.ttf -------------------------------------------------------------------------------- /completed-projects/emb-todo/fonts/glyphicons-halflings-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/btholt/jsmvc-pres/9aa87ab4ce7d2e13c3edd67128fa7105e8404e3b/completed-projects/emb-todo/fonts/glyphicons-halflings-regular.woff -------------------------------------------------------------------------------- /completed-projects/emb-todo/img/ember.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/btholt/jsmvc-pres/9aa87ab4ce7d2e13c3edd67128fa7105e8404e3b/completed-projects/emb-todo/img/ember.png -------------------------------------------------------------------------------- /completed-projects/emb-todo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | emb-todo 6 | 7 | 8 | 9 | 10 | 11 | 17 | 18 | 44 | 45 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | -------------------------------------------------------------------------------- /completed-projects/emb-todo/js/app.js: -------------------------------------------------------------------------------- 1 | window.Todos = Ember.Application.create(); 2 | 3 | Todos.ApplicationAdapter = DS.FixtureAdapter.extend(); -------------------------------------------------------------------------------- /completed-projects/emb-todo/js/components.js: -------------------------------------------------------------------------------- 1 | Todos.TodoEntryComponent = Ember.Component.extend({ 2 | actions: { 3 | click: function() { 4 | this.sendAction('remove'); 5 | } 6 | } 7 | }); -------------------------------------------------------------------------------- /completed-projects/emb-todo/js/controllers.js: -------------------------------------------------------------------------------- 1 | Todos.TodosController = Ember.ArrayController.extend({ 2 | actions: { 3 | createNewTodo: function() { 4 | var newVal = this.get('newTodo'); 5 | var todo = this.store.createRecord('todo', { 6 | val: newVal, 7 | completed: false 8 | }); 9 | this.set('newTodo', ''); 10 | todo.save(); 11 | }, 12 | clearCompleted: function() { 13 | var completed = this.filterBy('completed', true); 14 | completed.invoke('deleteRecord'); 15 | completed.invoke('save'); 16 | } 17 | } 18 | }); 19 | 20 | Todos.TodoController = Ember.ObjectController.extend({ 21 | actions: { 22 | removeTodo: function() { 23 | var todo = this.get('model'); 24 | todo.deleteRecord(); 25 | todo.save(); 26 | } 27 | } 28 | }); -------------------------------------------------------------------------------- /completed-projects/emb-todo/js/fixtures.js: -------------------------------------------------------------------------------- 1 | Todos.Todo.FIXTURES = [ 2 | { 3 | id: 1, 4 | val: 'Learn Ember.js', 5 | completed: true 6 | }, 7 | { 8 | id: 2, 9 | val: 'Banana for Scale', 10 | completed: false 11 | }, 12 | { 13 | id: 3, 14 | val: 'Puppies', 15 | completed: false 16 | }, 17 | { 18 | id: 4, 19 | val: 'Duck sized horse', 20 | completed: true 21 | }, 22 | { 23 | id: 5, 24 | val: 'Horse-sized duck', 25 | completed: false 26 | } 27 | ]; -------------------------------------------------------------------------------- /completed-projects/emb-todo/js/models.js: -------------------------------------------------------------------------------- 1 | Todos.Todo = DS.Model.extend({ 2 | val: DS.attr('string'), 3 | completed: DS.attr('boolean') 4 | }); -------------------------------------------------------------------------------- /completed-projects/emb-todo/js/router.js: -------------------------------------------------------------------------------- 1 | Todos.Router.map(function() { 2 | this.resource('todos', { path: '/' }); 3 | }); 4 | 5 | Todos.TodosRoute = Ember.Route.extend({ 6 | model: function() { 7 | return this.store.find('todo'); 8 | } 9 | }); -------------------------------------------------------------------------------- /completed-projects/ng-todo/css/style.css: -------------------------------------------------------------------------------- 1 | .outer-container { 2 | width: 80%; 3 | margin: 10px auto; 4 | } 5 | 6 | .finished { 7 | text-decoration: line-through; 8 | color: lightgray; 9 | font-style: italic; 10 | } 11 | 12 | .input-group { 13 | margin: 10px 0; 14 | } 15 | 16 | .add-todo-group { 17 | margin-bottom: 30px; 18 | } 19 | 20 | .btn-clear-group { 21 | margin-top: 30px; 22 | text-align: right; 23 | } 24 | 25 | .navbar-img { 26 | margin-top: 13px; 27 | } 28 | 29 | .navbar { 30 | border-radius: 0; 31 | } -------------------------------------------------------------------------------- /completed-projects/ng-todo/fonts/glyphicons-halflings-regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/btholt/jsmvc-pres/9aa87ab4ce7d2e13c3edd67128fa7105e8404e3b/completed-projects/ng-todo/fonts/glyphicons-halflings-regular.eot -------------------------------------------------------------------------------- /completed-projects/ng-todo/fonts/glyphicons-halflings-regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/btholt/jsmvc-pres/9aa87ab4ce7d2e13c3edd67128fa7105e8404e3b/completed-projects/ng-todo/fonts/glyphicons-halflings-regular.ttf -------------------------------------------------------------------------------- /completed-projects/ng-todo/fonts/glyphicons-halflings-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/btholt/jsmvc-pres/9aa87ab4ce7d2e13c3edd67128fa7105e8404e3b/completed-projects/ng-todo/fonts/glyphicons-halflings-regular.woff -------------------------------------------------------------------------------- /completed-projects/ng-todo/img/AngularJS.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/btholt/jsmvc-pres/9aa87ab4ce7d2e13c3edd67128fa7105e8404e3b/completed-projects/ng-todo/img/AngularJS.png -------------------------------------------------------------------------------- /completed-projects/ng-todo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ng-todo 6 | 7 | 8 | 9 | 10 | 11 | 17 | 18 |
19 |
20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 30 | 31 |
32 | 33 |
34 | 35 | 36 | 37 | 38 | 39 | 42 | 43 |
44 | 45 |
46 | 47 |
48 |
49 |
50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /completed-projects/ng-todo/js/app.js: -------------------------------------------------------------------------------- 1 | var ngTodo = angular.module('ngTodo', ['StupidFilters', 'StupdDirectives']) 2 | .config(function() { 3 | 4 | }); -------------------------------------------------------------------------------- /completed-projects/ng-todo/js/directives.js: -------------------------------------------------------------------------------- 1 | angular.module('StupdDirectives', []).directive('completeColor', function() { 2 | return { 3 | restrict: 'A', 4 | link: function (scope, element, attrs) { 5 | scope.$watch(attrs.completeColor, function (value) { 6 | element.css('color', (value ? 'yellow' : 'limegreen')); 7 | }); 8 | } 9 | } 10 | }) -------------------------------------------------------------------------------- /completed-projects/ng-todo/js/filters.js: -------------------------------------------------------------------------------- 1 | angular.module('StupidFilters', []).filter('altCaps', function() { 2 | return function(input) { 3 | var charArray = input.split(''); 4 | charArray = charArray.map(function(el,index) { 5 | return index % 2 === 0 ? el.toLowerCase(el) : el.toUpperCase(el); 6 | }); 7 | return charArray.join(''); 8 | }; 9 | }); -------------------------------------------------------------------------------- /completed-projects/ng-todo/js/ngTodoCtrl.js: -------------------------------------------------------------------------------- 1 | ngTodo.controller('NgTodoCtrl', function NgTodoCtrl() { 2 | this.todos = [ 3 | { val: 'Make a sweet app.', completed: false }, 4 | { val: 'Present the talk.', completed: false }, 5 | { val: 'Learn Angular.', completed: true }, 6 | { val: 'Do cool things.', completed: true }, 7 | { val: 'Another goal.', completed: false } 8 | ]; 9 | 10 | this.addNewTask = function() { 11 | this.todos.unshift({ completed: false, val: this.newTask }); 12 | this.newTask = ''; 13 | }; 14 | 15 | this.clearCompleted = function() { 16 | this.todos = this.todos.filter(function(el) { 17 | return !el.completed; 18 | }); 19 | } 20 | 21 | this.deleteTodo = function(index) { 22 | this.todos.splice(index,1); 23 | } 24 | }); -------------------------------------------------------------------------------- /completed-projects/react-todo/css/style.css: -------------------------------------------------------------------------------- 1 | .outer-container { 2 | width: 80%; 3 | margin: 10px auto; 4 | } 5 | 6 | .finished { 7 | text-decoration: line-through; 8 | color: lightgray; 9 | font-style: italic; 10 | } 11 | 12 | .input-group { 13 | margin: 10px 0; 14 | } 15 | 16 | .add-todo-group { 17 | margin-bottom: 30px; 18 | } 19 | 20 | .btn-clear-group { 21 | margin-top: 30px; 22 | text-align: right; 23 | } 24 | 25 | .navbar-img { 26 | margin-top: 5px; 27 | } 28 | 29 | .navbar { 30 | border-radius: 0; 31 | } -------------------------------------------------------------------------------- /completed-projects/react-todo/fonts/glyphicons-halflings-regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/btholt/jsmvc-pres/9aa87ab4ce7d2e13c3edd67128fa7105e8404e3b/completed-projects/react-todo/fonts/glyphicons-halflings-regular.eot -------------------------------------------------------------------------------- /completed-projects/react-todo/fonts/glyphicons-halflings-regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/btholt/jsmvc-pres/9aa87ab4ce7d2e13c3edd67128fa7105e8404e3b/completed-projects/react-todo/fonts/glyphicons-halflings-regular.ttf -------------------------------------------------------------------------------- /completed-projects/react-todo/fonts/glyphicons-halflings-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/btholt/jsmvc-pres/9aa87ab4ce7d2e13c3edd67128fa7105e8404e3b/completed-projects/react-todo/fonts/glyphicons-halflings-regular.woff -------------------------------------------------------------------------------- /completed-projects/react-todo/img/react.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/btholt/jsmvc-pres/9aa87ab4ce7d2e13c3edd67128fa7105e8404e3b/completed-projects/react-todo/img/react.png -------------------------------------------------------------------------------- /completed-projects/react-todo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | react-todo 6 | 7 | 8 | 9 | 10 | 11 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /completed-projects/react-todo/js/app.jsx: -------------------------------------------------------------------------------- 1 | /** @jsx React.DOM */ 2 | 3 | var app = app || {}; 4 | 5 | (function() { 6 | 'use strict'; 7 | 8 | app.retrieveData = function() { 9 | return app.FIXTURES; 10 | }; 11 | 12 | app.init = function() { 13 | var TodoApp = app.components.TodoApp; 14 | React.renderComponent( 15 | , 16 | document.getElementById('app') 17 | ); 18 | }; 19 | 20 | app.init(); 21 | })(); -------------------------------------------------------------------------------- /completed-projects/react-todo/js/components.jsx: -------------------------------------------------------------------------------- 1 | /** @jsx React.DOM */ 2 | 3 | var app = app || {}; 4 | app.components = app.components || {}; 5 | 6 | (function() { 7 | 'use strict'; 8 | 9 | var TodoApp = app.components.TodoApp = React.createClass({ 10 | getInitialState: function() { 11 | return { 12 | todos: [] 13 | }; 14 | }, 15 | componentDidMount: function() { 16 | var data = app.retrieveData(); 17 | this.setState({todos: data}); 18 | }, 19 | updateVal: function(val, index) { 20 | var state = this.state; 21 | state.todos[index].val = val; 22 | this.setState(state); 23 | }, 24 | toggleCompleted: function(index) { 25 | var state = this.state; 26 | state.todos[index].completed = !state.todos[index].completed; 27 | this.setState(state); 28 | }, 29 | deleteTodo: function(index) { 30 | var state = this.state; 31 | state.todos.splice(index, 1); 32 | this.setState(state); 33 | }, 34 | createNewTodo: function(newValue) { 35 | var state = this.state; 36 | state.todos.unshift({val:newValue,completed:false}); 37 | this.setState(state); 38 | }, 39 | filterCompleted: function() { 40 | var newTodos = this.state.todos.filter(function(el, index) { 41 | return !el.completed; 42 | }); 43 | this.setState({todos: newTodos}); 44 | }, 45 | render: function() { 46 | return ( 47 |
48 | 51 | 57 | 60 |
61 | ); 62 | } 63 | }); 64 | 65 | var NewTodo = app.components.NewTodo = React.createClass({ 66 | mixins: [React.addons.LinkedStateMixin], 67 | getInitialState: function() { 68 | return { 69 | newValue: "" 70 | }; 71 | }, 72 | handleNewTodo: function(e) { 73 | this.setState({newValue: ""}); 74 | this.props.createNewTodo(this.state.newValue); 75 | }, 76 | render: function() { 77 | return ( 78 |
79 | 80 | 81 | 82 | 83 | 84 | 87 | 88 |
89 | ); 90 | } 91 | }); 92 | 93 | var TodoList = app.components.TodoList = React.createClass({ 94 | render: function() { 95 | return ( 96 |
97 | {this.props.todos.map(function(todo, index) { 98 | return ( 99 | 106 | ); 107 | }.bind(this))} 108 |
109 | ); 110 | } 111 | }); 112 | 113 | var TodoItem = app.components.TodoItem = React.createClass({ 114 | handleVal: function(e) { 115 | this.props.updateVal(e.target.value, this.props.index); 116 | }, 117 | handleToggle: function() { 118 | this.props.toggleCompleted(this.props.index); 119 | }, 120 | handleDelete: function() { 121 | this.props.deleteTodo(this.props.index); 122 | }, 123 | render: function() { 124 | var inputClassName = "form-control"; 125 | if (this.props.todo.completed) { 126 | inputClassName += " finished"; 127 | } 128 | return ( 129 |
130 | 131 | 132 | 133 | 134 | 135 | 138 | 139 |
140 | ); 141 | } 142 | }); 143 | 144 | var ClearCompleted = app.components.ClearCompleted = React.createClass({ 145 | handleClick: function(e) { 146 | this.props.filterCompleted(); 147 | }, 148 | render: function() { 149 | return ( 150 |
151 | 152 |
153 | ); 154 | } 155 | }); 156 | 157 | 158 | })(); -------------------------------------------------------------------------------- /completed-projects/react-todo/js/fixtures.js: -------------------------------------------------------------------------------- 1 | // This is so you don't have to type up dummy data. 2 | var app = app || {}; 3 | app.FIXTURES = [ 4 | {val: 'Such task', completed:true}, 5 | {val: 'Much productivity', completed: true}, 6 | {val: 'So business', completed: false}, 7 | {val: 'Wow', completed: false}, 8 | {val: 'To the moon!', completed: true} 9 | ]; -------------------------------------------------------------------------------- /completed-projects/vue-todo/css/style.css: -------------------------------------------------------------------------------- 1 | .outer-container { 2 | width: 80%; 3 | margin: 10px auto; 4 | } 5 | 6 | .finished { 7 | text-decoration: line-through; 8 | color: lightgray; 9 | font-style: italic; 10 | } 11 | 12 | .input-group { 13 | margin: 10px 0; 14 | } 15 | 16 | .add-todo-group { 17 | margin-bottom: 30px; 18 | } 19 | 20 | .btn-clear-group { 21 | margin-top: 30px; 22 | text-align: right; 23 | } 24 | 25 | .navbar-img { 26 | margin-top: 5px; 27 | } 28 | 29 | .navbar-img img { 30 | height: 43px; 31 | } 32 | 33 | .navbar { 34 | border-radius: 0; 35 | } -------------------------------------------------------------------------------- /completed-projects/vue-todo/fonts/glyphicons-halflings-regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/btholt/jsmvc-pres/9aa87ab4ce7d2e13c3edd67128fa7105e8404e3b/completed-projects/vue-todo/fonts/glyphicons-halflings-regular.eot -------------------------------------------------------------------------------- /completed-projects/vue-todo/fonts/glyphicons-halflings-regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/btholt/jsmvc-pres/9aa87ab4ce7d2e13c3edd67128fa7105e8404e3b/completed-projects/vue-todo/fonts/glyphicons-halflings-regular.ttf -------------------------------------------------------------------------------- /completed-projects/vue-todo/fonts/glyphicons-halflings-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/btholt/jsmvc-pres/9aa87ab4ce7d2e13c3edd67128fa7105e8404e3b/completed-projects/vue-todo/fonts/glyphicons-halflings-regular.woff -------------------------------------------------------------------------------- /completed-projects/vue-todo/img/vue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/btholt/jsmvc-pres/9aa87ab4ce7d2e13c3edd67128fa7105e8404e3b/completed-projects/vue-todo/img/vue.png -------------------------------------------------------------------------------- /completed-projects/vue-todo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | vue-todo 6 | 7 | 8 | 9 | 10 | 11 | 17 | 18 |
19 |
20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 30 | 31 |
32 | 33 |
34 | 35 | 36 | 37 | 38 | 39 | 42 | 43 |
44 | 45 |
46 | 47 |
48 |
49 |
50 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /completed-projects/vue-todo/js/app.js: -------------------------------------------------------------------------------- 1 | var app = new Vue({ 2 | el: "#app", 3 | data: { 4 | newTask: '', 5 | todos: [ 6 | {val: "Such unleashed", completed: true}, 7 | {val: "Much web", completed: true}, 8 | {val: "So Vue", completed: false}, 9 | {val: "Very framework", completed: true}, 10 | {val: "Wow", completed: false} 11 | ] 12 | }, 13 | methods: { 14 | addNew: function(newTask) { 15 | this.$data.todos.unshift({val:this.$data.newTask}); 16 | this.$data.newTask = ""; 17 | }, 18 | remove: function(index) { 19 | this.$data.todos.$remove(index); 20 | }, 21 | clearCompleted: function(){ 22 | this.$data.todos = this.$data.todos.filter(function(el) { return !el.completed }); 23 | } 24 | } 25 | }); -------------------------------------------------------------------------------- /empty-projects/bb-todo/css/style.css: -------------------------------------------------------------------------------- 1 | .outer-container { 2 | width: 80%; 3 | margin: 10px auto; 4 | } 5 | 6 | .finished { 7 | text-decoration: line-through; 8 | color: lightgray; 9 | font-style: italic; 10 | } 11 | 12 | .input-group { 13 | margin: 10px 0; 14 | } 15 | 16 | .add-todo-group { 17 | margin-bottom: 30px; 18 | } 19 | 20 | .btn-clear-group { 21 | margin-top: 30px; 22 | text-align: right; 23 | } 24 | 25 | .navbar-img { 26 | margin-top: 13px; 27 | } 28 | 29 | .navbar-img img { 30 | height: 35px; 31 | background-color: rgba(255,255,255,0.2); 32 | border-radius: 5px; 33 | padding: 2px 5px; 34 | position: relative; 35 | top: -7px; 36 | } 37 | 38 | .navbar { 39 | border-radius: 0; 40 | } -------------------------------------------------------------------------------- /empty-projects/bb-todo/fonts/glyphicons-halflings-regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/btholt/jsmvc-pres/9aa87ab4ce7d2e13c3edd67128fa7105e8404e3b/empty-projects/bb-todo/fonts/glyphicons-halflings-regular.eot -------------------------------------------------------------------------------- /empty-projects/bb-todo/fonts/glyphicons-halflings-regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/btholt/jsmvc-pres/9aa87ab4ce7d2e13c3edd67128fa7105e8404e3b/empty-projects/bb-todo/fonts/glyphicons-halflings-regular.ttf -------------------------------------------------------------------------------- /empty-projects/bb-todo/fonts/glyphicons-halflings-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/btholt/jsmvc-pres/9aa87ab4ce7d2e13c3edd67128fa7105e8404e3b/empty-projects/bb-todo/fonts/glyphicons-halflings-regular.woff -------------------------------------------------------------------------------- /empty-projects/bb-todo/img/backbone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/btholt/jsmvc-pres/9aa87ab4ce7d2e13c3edd67128fa7105e8404e3b/empty-projects/bb-todo/img/backbone.png -------------------------------------------------------------------------------- /empty-projects/bb-todo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | bb-todo 6 | 7 | 8 | 9 | 10 | 11 | 17 | 18 |
19 |
20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 30 | 31 |
32 | 33 |
34 | 35 |
36 | 37 |
38 |
39 |
40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /empty-projects/bb-todo/js/app.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/btholt/jsmvc-pres/9aa87ab4ce7d2e13c3edd67128fa7105e8404e3b/empty-projects/bb-todo/js/app.js -------------------------------------------------------------------------------- /empty-projects/bb-todo/js/models.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/btholt/jsmvc-pres/9aa87ab4ce7d2e13c3edd67128fa7105e8404e3b/empty-projects/bb-todo/js/models.js -------------------------------------------------------------------------------- /empty-projects/bb-todo/js/router.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/btholt/jsmvc-pres/9aa87ab4ce7d2e13c3edd67128fa7105e8404e3b/empty-projects/bb-todo/js/router.js -------------------------------------------------------------------------------- /empty-projects/bb-todo/js/views.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/btholt/jsmvc-pres/9aa87ab4ce7d2e13c3edd67128fa7105e8404e3b/empty-projects/bb-todo/js/views.js -------------------------------------------------------------------------------- /empty-projects/emb-todo/css/style.css: -------------------------------------------------------------------------------- 1 | .outer-container { 2 | width: 80%; 3 | margin: 10px auto; 4 | } 5 | 6 | .finished { 7 | text-decoration: line-through; 8 | color: lightgray; 9 | font-style: italic; 10 | } 11 | 12 | .input-group { 13 | margin: 10px 0; 14 | } 15 | 16 | .add-todo-group { 17 | margin-bottom: 30px; 18 | } 19 | 20 | .btn-clear-group { 21 | margin-top: 30px; 22 | text-align: right; 23 | } 24 | 25 | .navbar-img { 26 | margin-top: 4px; 27 | } 28 | 29 | .navbar-img img { 30 | height: 38px; 31 | } 32 | 33 | .navbar { 34 | border-radius: 0; 35 | } 36 | 37 | -------------------------------------------------------------------------------- /empty-projects/emb-todo/fonts/glyphicons-halflings-regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/btholt/jsmvc-pres/9aa87ab4ce7d2e13c3edd67128fa7105e8404e3b/empty-projects/emb-todo/fonts/glyphicons-halflings-regular.eot -------------------------------------------------------------------------------- /empty-projects/emb-todo/fonts/glyphicons-halflings-regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/btholt/jsmvc-pres/9aa87ab4ce7d2e13c3edd67128fa7105e8404e3b/empty-projects/emb-todo/fonts/glyphicons-halflings-regular.ttf -------------------------------------------------------------------------------- /empty-projects/emb-todo/fonts/glyphicons-halflings-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/btholt/jsmvc-pres/9aa87ab4ce7d2e13c3edd67128fa7105e8404e3b/empty-projects/emb-todo/fonts/glyphicons-halflings-regular.woff -------------------------------------------------------------------------------- /empty-projects/emb-todo/img/ember.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/btholt/jsmvc-pres/9aa87ab4ce7d2e13c3edd67128fa7105e8404e3b/empty-projects/emb-todo/img/ember.png -------------------------------------------------------------------------------- /empty-projects/emb-todo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | emb-todo 6 | 7 | 8 | 9 | 10 | 11 | 17 | 18 | 19 |
20 |
21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 31 | 32 |
33 | 34 |
35 | 36 | 37 | 38 | 39 | 40 | 41 | 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 | -------------------------------------------------------------------------------- /empty-projects/emb-todo/js/app.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/btholt/jsmvc-pres/9aa87ab4ce7d2e13c3edd67128fa7105e8404e3b/empty-projects/emb-todo/js/app.js -------------------------------------------------------------------------------- /empty-projects/emb-todo/js/components.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/btholt/jsmvc-pres/9aa87ab4ce7d2e13c3edd67128fa7105e8404e3b/empty-projects/emb-todo/js/components.js -------------------------------------------------------------------------------- /empty-projects/emb-todo/js/controllers.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/btholt/jsmvc-pres/9aa87ab4ce7d2e13c3edd67128fa7105e8404e3b/empty-projects/emb-todo/js/controllers.js -------------------------------------------------------------------------------- /empty-projects/emb-todo/js/fixtures.js: -------------------------------------------------------------------------------- 1 | // This part isn't actually necessary. This is just to clear up console errors while we're making the app. 2 | var Todos = Todos || {}; 3 | Todos.Todo = Todos.Todo || {}; 4 | 5 | Todos.Todo.FIXTURES = [ 6 | { 7 | id: 1, 8 | val: 'Learn Ember.js', 9 | completed: true 10 | }, 11 | { 12 | id: 2, 13 | val: 'Banana for Scale', 14 | completed: false 15 | }, 16 | { 17 | id: 3, 18 | val: 'Puppies', 19 | completed: false 20 | }, 21 | { 22 | id: 4, 23 | val: 'Duck sized horse', 24 | completed: true 25 | }, 26 | { 27 | id: 5, 28 | val: 'Horse-sized duck', 29 | completed: false 30 | } 31 | ]; -------------------------------------------------------------------------------- /empty-projects/emb-todo/js/models.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/btholt/jsmvc-pres/9aa87ab4ce7d2e13c3edd67128fa7105e8404e3b/empty-projects/emb-todo/js/models.js -------------------------------------------------------------------------------- /empty-projects/emb-todo/js/router.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/btholt/jsmvc-pres/9aa87ab4ce7d2e13c3edd67128fa7105e8404e3b/empty-projects/emb-todo/js/router.js -------------------------------------------------------------------------------- /empty-projects/ng-todo/css/style.css: -------------------------------------------------------------------------------- 1 | .outer-container { 2 | width: 80%; 3 | margin: 10px auto; 4 | } 5 | 6 | .finished { 7 | text-decoration: line-through; 8 | color: lightgray; 9 | font-style: italic; 10 | } 11 | 12 | .input-group { 13 | margin: 10px 0; 14 | } 15 | 16 | .add-todo-group { 17 | margin-bottom: 30px; 18 | } 19 | 20 | .btn-clear-group { 21 | margin-top: 30px; 22 | text-align: right; 23 | } 24 | 25 | .navbar-img { 26 | margin-top: 13px; 27 | } 28 | 29 | .navbar { 30 | border-radius: 0; 31 | } -------------------------------------------------------------------------------- /empty-projects/ng-todo/fonts/glyphicons-halflings-regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/btholt/jsmvc-pres/9aa87ab4ce7d2e13c3edd67128fa7105e8404e3b/empty-projects/ng-todo/fonts/glyphicons-halflings-regular.eot -------------------------------------------------------------------------------- /empty-projects/ng-todo/fonts/glyphicons-halflings-regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/btholt/jsmvc-pres/9aa87ab4ce7d2e13c3edd67128fa7105e8404e3b/empty-projects/ng-todo/fonts/glyphicons-halflings-regular.ttf -------------------------------------------------------------------------------- /empty-projects/ng-todo/fonts/glyphicons-halflings-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/btholt/jsmvc-pres/9aa87ab4ce7d2e13c3edd67128fa7105e8404e3b/empty-projects/ng-todo/fonts/glyphicons-halflings-regular.woff -------------------------------------------------------------------------------- /empty-projects/ng-todo/img/AngularJS.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/btholt/jsmvc-pres/9aa87ab4ce7d2e13c3edd67128fa7105e8404e3b/empty-projects/ng-todo/img/AngularJS.png -------------------------------------------------------------------------------- /empty-projects/ng-todo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ng-todo 6 | 7 | 8 | 9 | 10 | 11 | 17 | 18 |
19 |
20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 30 | 31 |
32 | 33 |
34 | 35 | 36 | 37 | 38 | 39 | 42 | 43 |
44 | 45 |
46 | 47 |
48 |
49 |
50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /empty-projects/ng-todo/js/app.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/btholt/jsmvc-pres/9aa87ab4ce7d2e13c3edd67128fa7105e8404e3b/empty-projects/ng-todo/js/app.js -------------------------------------------------------------------------------- /empty-projects/ng-todo/js/directives.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/btholt/jsmvc-pres/9aa87ab4ce7d2e13c3edd67128fa7105e8404e3b/empty-projects/ng-todo/js/directives.js -------------------------------------------------------------------------------- /empty-projects/ng-todo/js/filters.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/btholt/jsmvc-pres/9aa87ab4ce7d2e13c3edd67128fa7105e8404e3b/empty-projects/ng-todo/js/filters.js -------------------------------------------------------------------------------- /empty-projects/ng-todo/js/ngTodoCtrl.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/btholt/jsmvc-pres/9aa87ab4ce7d2e13c3edd67128fa7105e8404e3b/empty-projects/ng-todo/js/ngTodoCtrl.js -------------------------------------------------------------------------------- /empty-projects/react-todo/css/style.css: -------------------------------------------------------------------------------- 1 | .outer-container { 2 | width: 80%; 3 | margin: 10px auto; 4 | } 5 | 6 | .finished { 7 | text-decoration: line-through; 8 | color: lightgray; 9 | font-style: italic; 10 | } 11 | 12 | .input-group { 13 | margin: 10px 0; 14 | } 15 | 16 | .add-todo-group { 17 | margin-bottom: 30px; 18 | } 19 | 20 | .btn-clear-group { 21 | margin-top: 30px; 22 | text-align: right; 23 | } 24 | 25 | .navbar-img { 26 | margin-top: 5px; 27 | } 28 | 29 | .navbar { 30 | border-radius: 0; 31 | } -------------------------------------------------------------------------------- /empty-projects/react-todo/fonts/glyphicons-halflings-regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/btholt/jsmvc-pres/9aa87ab4ce7d2e13c3edd67128fa7105e8404e3b/empty-projects/react-todo/fonts/glyphicons-halflings-regular.eot -------------------------------------------------------------------------------- /empty-projects/react-todo/fonts/glyphicons-halflings-regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/btholt/jsmvc-pres/9aa87ab4ce7d2e13c3edd67128fa7105e8404e3b/empty-projects/react-todo/fonts/glyphicons-halflings-regular.ttf -------------------------------------------------------------------------------- /empty-projects/react-todo/fonts/glyphicons-halflings-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/btholt/jsmvc-pres/9aa87ab4ce7d2e13c3edd67128fa7105e8404e3b/empty-projects/react-todo/fonts/glyphicons-halflings-regular.woff -------------------------------------------------------------------------------- /empty-projects/react-todo/img/react.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/btholt/jsmvc-pres/9aa87ab4ce7d2e13c3edd67128fa7105e8404e3b/empty-projects/react-todo/img/react.png -------------------------------------------------------------------------------- /empty-projects/react-todo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | react-todo 6 | 7 | 8 | 9 | 10 | 11 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /empty-projects/react-todo/js/app.jsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/btholt/jsmvc-pres/9aa87ab4ce7d2e13c3edd67128fa7105e8404e3b/empty-projects/react-todo/js/app.jsx -------------------------------------------------------------------------------- /empty-projects/react-todo/js/components.jsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/btholt/jsmvc-pres/9aa87ab4ce7d2e13c3edd67128fa7105e8404e3b/empty-projects/react-todo/js/components.jsx -------------------------------------------------------------------------------- /empty-projects/react-todo/js/fixtures.js: -------------------------------------------------------------------------------- 1 | // This is so you don't have to type up dummy data. 2 | var app = app || {}; 3 | app.FIXTURES = [ 4 | {val: 'Such task', completed:true}, 5 | {val: 'Much productivity', completed: true}, 6 | {val: 'So business', completed: false}, 7 | {val: 'Wow', completed: false}, 8 | {val: 'To the moon!', completed: true} 9 | ]; -------------------------------------------------------------------------------- /empty-projects/vue-todo/css/style.css: -------------------------------------------------------------------------------- 1 | .outer-container { 2 | width: 80%; 3 | margin: 10px auto; 4 | } 5 | 6 | .finished { 7 | text-decoration: line-through; 8 | color: lightgray; 9 | font-style: italic; 10 | } 11 | 12 | .input-group { 13 | margin: 10px 0; 14 | } 15 | 16 | .add-todo-group { 17 | margin-bottom: 30px; 18 | } 19 | 20 | .btn-clear-group { 21 | margin-top: 30px; 22 | text-align: right; 23 | } 24 | 25 | .navbar-img { 26 | margin-top: 5px; 27 | } 28 | 29 | .navbar-img img { 30 | height: 43px; 31 | } 32 | 33 | .navbar { 34 | border-radius: 0; 35 | } -------------------------------------------------------------------------------- /empty-projects/vue-todo/fonts/glyphicons-halflings-regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/btholt/jsmvc-pres/9aa87ab4ce7d2e13c3edd67128fa7105e8404e3b/empty-projects/vue-todo/fonts/glyphicons-halflings-regular.eot -------------------------------------------------------------------------------- /empty-projects/vue-todo/fonts/glyphicons-halflings-regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/btholt/jsmvc-pres/9aa87ab4ce7d2e13c3edd67128fa7105e8404e3b/empty-projects/vue-todo/fonts/glyphicons-halflings-regular.ttf -------------------------------------------------------------------------------- /empty-projects/vue-todo/fonts/glyphicons-halflings-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/btholt/jsmvc-pres/9aa87ab4ce7d2e13c3edd67128fa7105e8404e3b/empty-projects/vue-todo/fonts/glyphicons-halflings-regular.woff -------------------------------------------------------------------------------- /empty-projects/vue-todo/img/vue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/btholt/jsmvc-pres/9aa87ab4ce7d2e13c3edd67128fa7105e8404e3b/empty-projects/vue-todo/img/vue.png -------------------------------------------------------------------------------- /empty-projects/vue-todo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | vue-todo 6 | 7 | 8 | 9 | 10 | 11 | 17 | 18 |
19 |
20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 30 | 31 |
32 | 33 |
34 | 35 | 36 | 37 | 38 | 39 | 42 | 43 |
44 | 45 |
46 | 47 |
48 |
49 |
50 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /empty-projects/vue-todo/js/app.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/btholt/jsmvc-pres/9aa87ab4ce7d2e13c3edd67128fa7105e8404e3b/empty-projects/vue-todo/js/app.js -------------------------------------------------------------------------------- /presenters-notes/angular.md: -------------------------------------------------------------------------------- 1 | # Angular 2 | 3 | ## app.js 4 | 5 | ```javascript 6 | 7 | var ngTodo = angular.module('ngTodo', []) 8 | .config(function() { 9 | 10 | }); 11 | 12 | ``` 13 | 14 | - Creation an Angular app. Typically a pretty short file so don't worry too much about that. 15 | - You'll typically do app-level configurations at this place. You can change the mustache syntax to be different (like we had because it overlaps with Django) 16 | 17 | ## ngTodoCtrl.js 18 | 19 | ```javascript 20 | 21 | ngTodo.controller('NgTodoCtrl', function NgTodoCtrl() { 22 | 23 | }); 24 | 25 | ``` 26 | 27 | - Setting up your controller in Angular. This can take several forms but I found this to be the most concise. 28 | - Here we are using "controller as" syntax instead of $scope syntax. This syntax is viewed as superior because it becomes more apparent where the data is coming from if you have nested controllers. Instead of sticking things on the $scope object, you stick in on `this`. 29 | - Here we would do dependency injection if we had anything to inject. Angular actually looks at the name of the inject parameter and injects the correct module, including your own custom services. 30 | 31 | 32 | ### Deprecated notes: 33 | - Notice the dependency in the $scope. Angular actually looks at the name of the inject parameter and injects the correct module, including your own custom services. 34 | - The $scope service is exactly it sounds like: a scope object. It will inherit from its parents scopes and act like how you expect block level scoping would (it can see parents but not vice versa.) 35 | 36 | ```javascript 37 | 38 | this.todos = [ 39 | { val: 'Make a sweet app.', completed: false }, 40 | { val: 'Present the talk.', completed: false }, 41 | { val: 'Learn Angular.', completed: true }, 42 | { val: 'Do cool things.', completed: true }, 43 | { val: 'Another goal.', completed: false } 44 | ]; 45 | 46 | ``` 47 | 48 | - Adding some default values in. Notice that this is just an array of plain ol' JavaScript object. This is a lot of the power of Angular. It makes a lot of you JavaScript knowledge very useful. 49 | - Notice we're sticking this on the this object. This will not only make it available to rest of where that controller is available, but also where that controller is applicable in the template. Because we use for it display, we need this to be on the this object. 50 | 51 | ## index.html 52 | 53 | ```html 54 | 55 | 56 |
57 |
58 | 59 | 60 | ``` 61 | 62 | - Just some set-up stuff here. 63 | - We need to tell Angular where the app lives (common to put this on the body or HTML tag if you only plan on having one app on your page.) 64 | - We also need to tell the controller where it has scope. Its scope will only be visible in that element and its subtree. As such, it makes sense to have multiple controllers if you have obvious separationg concerns in your app, or at least different controllers for different pages/routes/states. 65 | - You're telling Angular that your app resides in the body (you can have multiple apps on a page.) 66 | - You're also telling Angular that `section` is governed my the NgTodoCtrl. You can also have multiple controllers governing different pieces of the page. 67 | - You can even have nested controllers but make sure to use the Angular-UI Router if you're going to attemp that business. The Angular router doesn't do it (or at least not well.) 68 | - The `as XXXX` syntax tells Angular that everything on this controller can be accessed as `ctrl.whatever`. 69 | 70 | ```html 71 | 72 | 73 | {{ ctrl.newTask }} 74 | 75 | ``` 76 | 77 | - The ng-model directive is how the two way data binding happens. After putting that directive on, now if it changes in the view, it changes in the JavaScript variable and vice versa. So if we change it in the JS, it automagically changes the view and if we enter stuff in the input, the JS variable changes. Let's check it out. 78 | - The moustache syntax is how to simply dump out the value of that value to the page. It stays updated! 79 | - Notice you have to preface it with `ctrl.`. This is reference to which controller it's on. 80 | 81 | ```javascript 82 | 83 |
84 | 85 | ``` 86 | 87 | - This will loop over your array and create an element for each of the indexes in the array. 88 | - Admittedly, this is the feature that made me fall in love with Angular. The simplicity how you can hand it a JavaScript array and how it loops over it with such ease. Such magic. Wow. 89 | 90 | ## ngTodoCtrl.js 91 | 92 | ```javascript 93 | 94 | $scope.addNewTask = function() { 95 | this.todos.unshift({ completed: false, val: this.newTask }); 96 | this.newTask = ''; 97 | }; 98 | 99 | this.clearCompleted = function() { 100 | this.todos = this.todos.filter(function(el) { 101 | return !el.completed; 102 | }); 103 | } 104 | 105 | ``` 106 | 107 | - So at first it was just kind of cool that we were using the POJO for the Angular objects but this is where it become truly beautiful : you can interact with them with all of your existing JS knowledge. Here we just using unshift (the opposite of pop, an ES3 Array function) and filter (an ES5 Array function; simply filters out objects based on boolean return values.) 108 | - We're sticking these functions on the `this` object, making them available to be called from the template. 109 | - Let's check how this affects the ng-repeat. 110 | 111 | ## index.html 112 | 113 | ```html 114 | 115 |