Lone StarPHP 2013 - Building Web Apps from a New Angle
-
Upload
pablo-godel -
Category
Technology
-
view
108 -
download
0
description
Transcript of Lone StarPHP 2013 - Building Web Apps from a New Angle
![Page 1: Lone StarPHP 2013 - Building Web Apps from a New Angle](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c718334a7959090e8b45de/html5/thumbnails/1.jpg)
Pablo Godel @pgodel - lonestarphp.comJune 28th 2013 - Dallas, TX
https://joind.in/8695
Building Web Apps from a New Angle
Friday, June 28, 13
![Page 2: Lone StarPHP 2013 - Building Web Apps from a New Angle](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c718334a7959090e8b45de/html5/thumbnails/2.jpg)
Who Am I?
⁃ Born in Argentina, living in the US since 1999⁃ PHP & Symfony developer⁃ Founder of the original PHP mailing list in spanish ⁃ Parrilla Lover⁃ Co-founder of ServerGrove
Friday, June 28, 13
![Page 3: Lone StarPHP 2013 - Building Web Apps from a New Angle](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c718334a7959090e8b45de/html5/thumbnails/3.jpg)
Friday, June 28, 13
![Page 4: Lone StarPHP 2013 - Building Web Apps from a New Angle](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c718334a7959090e8b45de/html5/thumbnails/4.jpg)
Friday, June 28, 13
![Page 5: Lone StarPHP 2013 - Building Web Apps from a New Angle](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c718334a7959090e8b45de/html5/thumbnails/5.jpg)
⁃ Founded ServerGrove Networks in 2005
⁃ Provider of web hosting specialized in PHP, Symfony, ZendFramework, MongoDB and others
⁃ Servers in USA and Europe!
ServerGrove!
Friday, June 28, 13
![Page 6: Lone StarPHP 2013 - Building Web Apps from a New Angle](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c718334a7959090e8b45de/html5/thumbnails/6.jpg)
Very active open source supporter through codecontributions and usergroups/conference sponsoring
Community is our teacher
Friday, June 28, 13
![Page 7: Lone StarPHP 2013 - Building Web Apps from a New Angle](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c718334a7959090e8b45de/html5/thumbnails/7.jpg)
In the beginning there was HTML...
Friday, June 28, 13
![Page 8: Lone StarPHP 2013 - Building Web Apps from a New Angle](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c718334a7959090e8b45de/html5/thumbnails/8.jpg)
Friday, June 28, 13
![Page 9: Lone StarPHP 2013 - Building Web Apps from a New Angle](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c718334a7959090e8b45de/html5/thumbnails/9.jpg)
Then it came JavaScript
Friday, June 28, 13
![Page 10: Lone StarPHP 2013 - Building Web Apps from a New Angle](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c718334a7959090e8b45de/html5/thumbnails/10.jpg)
Then it came JavaScriptand it was not cool...
Friday, June 28, 13
![Page 11: Lone StarPHP 2013 - Building Web Apps from a New Angle](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c718334a7959090e8b45de/html5/thumbnails/11.jpg)
It was Important Business!
Friday, June 28, 13
![Page 12: Lone StarPHP 2013 - Building Web Apps from a New Angle](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c718334a7959090e8b45de/html5/thumbnails/12.jpg)
It was Serious Business!
Friday, June 28, 13
![Page 13: Lone StarPHP 2013 - Building Web Apps from a New Angle](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c718334a7959090e8b45de/html5/thumbnails/13.jpg)
It was Serious Business!
Friday, June 28, 13
![Page 14: Lone StarPHP 2013 - Building Web Apps from a New Angle](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c718334a7959090e8b45de/html5/thumbnails/14.jpg)
Very Important Uses
Friday, June 28, 13
![Page 15: Lone StarPHP 2013 - Building Web Apps from a New Angle](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c718334a7959090e8b45de/html5/thumbnails/15.jpg)
Image Rollovers!
Friday, June 28, 13
![Page 16: Lone StarPHP 2013 - Building Web Apps from a New Angle](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c718334a7959090e8b45de/html5/thumbnails/16.jpg)
http://joemaller.com/javascript/simpleroll/simpleroll_example.html
Image Rollovers!
Friday, June 28, 13
![Page 17: Lone StarPHP 2013 - Building Web Apps from a New Angle](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c718334a7959090e8b45de/html5/thumbnails/17.jpg)
Friday, June 28, 13
![Page 18: Lone StarPHP 2013 - Building Web Apps from a New Angle](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c718334a7959090e8b45de/html5/thumbnails/18.jpg)
And then came AJAX...
Friday, June 28, 13
![Page 19: Lone StarPHP 2013 - Building Web Apps from a New Angle](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c718334a7959090e8b45de/html5/thumbnails/19.jpg)
AJAX saved the Internets!
Friday, June 28, 13
![Page 20: Lone StarPHP 2013 - Building Web Apps from a New Angle](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c718334a7959090e8b45de/html5/thumbnails/20.jpg)
2004 - 2006
Friday, June 28, 13
![Page 21: Lone StarPHP 2013 - Building Web Apps from a New Angle](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c718334a7959090e8b45de/html5/thumbnails/21.jpg)
Friday, June 28, 13
![Page 22: Lone StarPHP 2013 - Building Web Apps from a New Angle](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c718334a7959090e8b45de/html5/thumbnails/22.jpg)
New Breed of JS Frameworks
Friday, June 28, 13
![Page 23: Lone StarPHP 2013 - Building Web Apps from a New Angle](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c718334a7959090e8b45de/html5/thumbnails/23.jpg)
Friday, June 28, 13
![Page 24: Lone StarPHP 2013 - Building Web Apps from a New Angle](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c718334a7959090e8b45de/html5/thumbnails/24.jpg)
An introduction to
•100% JavaScript Framework•MVC•Opinionated •Modular & Extensible•Services & Dependency Injection•Simple yet powerful Templating•Data-binding heaven•Input validations•Animations! (new)•Testable•Many more awesome stuff...
Friday, June 28, 13
![Page 25: Lone StarPHP 2013 - Building Web Apps from a New Angle](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c718334a7959090e8b45de/html5/thumbnails/25.jpg)
•Single Page Apps•Responsive & Dynamic•Real-time & Interactive•Rich UI•User Friendly•I18n and L10n•Cross-platform - Desktop/Mobile•Animations•Control with Voice Commands
What can we do?
An introduction to
Friday, June 28, 13
![Page 26: Lone StarPHP 2013 - Building Web Apps from a New Angle](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c718334a7959090e8b45de/html5/thumbnails/26.jpg)
<!doctype html><html ng-app> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script> </head> <body> <div> <label>Name:</label> <input type="text" ng-model="yourName" placeholder="Enter a name here"> <hr> <h1>Hello {{yourName}}!</h1> </div> </body></html>
Templates
Friday, June 28, 13
![Page 27: Lone StarPHP 2013 - Building Web Apps from a New Angle](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c718334a7959090e8b45de/html5/thumbnails/27.jpg)
<!doctype html><html ng-app> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script> </head> <body> <div> <label>Name:</label> <input type="text" ng-model="yourName" placeholder="Enter a name here"> <hr> <h1>Hello {{yourName}}!</h1> </div> </body></html>
Templates & Directives
Friday, June 28, 13
![Page 28: Lone StarPHP 2013 - Building Web Apps from a New Angle](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c718334a7959090e8b45de/html5/thumbnails/28.jpg)
•ng-app•ng-controller•ng-model•ng-bind•ng-repeat•ng-show & ng-hide•your custom directives•any more more...
http://docs.angularjs.org/api/ng
Directives
Friday, June 28, 13
![Page 29: Lone StarPHP 2013 - Building Web Apps from a New Angle](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c718334a7959090e8b45de/html5/thumbnails/29.jpg)
ng-app
<html>...<body>...<div ng-app>...
</div>
Bootstraps the app and defines its root. One per HTML document.
Directives
<html>...<body ng-app>...
<html ng-app>...
Friday, June 28, 13
![Page 30: Lone StarPHP 2013 - Building Web Apps from a New Angle](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c718334a7959090e8b45de/html5/thumbnails/30.jpg)
ng-controller
<html ng-app> <body> <div ng-controller=”TestController”>
Hello {{name}} </div>
<script>function TestController($scope) {$scope.name = ‘Pablo’;
}</script>
</body></html>
Defines which controller (function) will be linked to the view.
Directives
Friday, June 28, 13
![Page 31: Lone StarPHP 2013 - Building Web Apps from a New Angle](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c718334a7959090e8b45de/html5/thumbnails/31.jpg)
ng-model
<html ng-app> <body> <div>
<input type=”text” ng-model=”name” /><input type=”textarea” ng-model=”notes” /><input type=”checkbox” ng-model=”notify” />
</div> </body></html>
Defines two-way data binding with input, select, textarea.
Directives
Friday, June 28, 13
![Page 32: Lone StarPHP 2013 - Building Web Apps from a New Angle](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c718334a7959090e8b45de/html5/thumbnails/32.jpg)
ng-bind
<html ng-app> <body> <div>
<div ng-bind=”name”></div>{{name}} <!- less verbose -->
</div> </body></html>
Replaces the text content of the specified HTML element with the value of a given expression, and updates the content when the value of that expression changes.
Directives
Friday, June 28, 13
![Page 33: Lone StarPHP 2013 - Building Web Apps from a New Angle](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c718334a7959090e8b45de/html5/thumbnails/33.jpg)
ng-repeat
<html ng-app> <body> <div>
<ul><li ng-repeat="item in items">{{$index}}: {{item.name}}
</li></ul>
</div> </body></html>
Instantiates a template once per item from a collection. Each template instance gets its own scope, where the given loop variable is set to the current collection item, and $index is set to the item index or key.
Directives
Friday, June 28, 13
![Page 34: Lone StarPHP 2013 - Building Web Apps from a New Angle](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c718334a7959090e8b45de/html5/thumbnails/34.jpg)
ng-show & ng-hide
<html ng-app> <body> <div>
Click me: <input type="checkbox" ng-model="checked"><br/><span ng-show="checked">Yes!</span><span ng-hide="checked">Hidden.</span>
</div> </body></html>
Show or hide a portion of the DOM tree (HTML) conditionally.
Directives
Friday, June 28, 13
![Page 35: Lone StarPHP 2013 - Building Web Apps from a New Angle](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c718334a7959090e8b45de/html5/thumbnails/35.jpg)
Custom Directives
<html ng-app> <body> <div> Date format: <input ng-model="format"> <hr/> Current time is: <span my-current-time="format"></span>
</div> </body></html>
Create new directives to extend HTML. Encapsulate complex output processing in simple calls.
Directives
Friday, June 28, 13
![Page 36: Lone StarPHP 2013 - Building Web Apps from a New Angle](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c718334a7959090e8b45de/html5/thumbnails/36.jpg)
$scope
function GreetCtrl($scope) { $scope.name = 'World';} function ListCtrl($scope) { $scope.names = ['Igor', 'Misko', 'Vojta'];
$scope.pop = function() { $scope.names.pop(); }}...<button ng-click=”pop()”>Pop</button>
Scope holds data model per controller. It detects changes so data can be updated in the view.
http://docs.angularjs.org/guide/scope
Model
Friday, June 28, 13
![Page 37: Lone StarPHP 2013 - Building Web Apps from a New Angle](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c718334a7959090e8b45de/html5/thumbnails/37.jpg)
•A collection of configuration and run blocks which get applied to the application during the bootstrap process.•Third-party code can be packaged in Modules•Modules can list other modules as their dependencies•Modules are a way of managing $injector configuration•An AngularJS App is a Module
http://docs.angularjs.org/guide/module
Modules
Friday, June 28, 13
![Page 38: Lone StarPHP 2013 - Building Web Apps from a New Angle](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c718334a7959090e8b45de/html5/thumbnails/38.jpg)
http://docs.angularjs.org/guide/module
<html ng-app=”myApp”> <body> <div ng-controller=”AppCtrl”>
Hello {{name}} </div> </body></html>
var app = angular.module('myApp', []);
app.controller( 'AppCtrl', function($scope) { $scope.name = 'Guest';});
Modules
Friday, June 28, 13
![Page 39: Lone StarPHP 2013 - Building Web Apps from a New Angle](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c718334a7959090e8b45de/html5/thumbnails/39.jpg)
Filters typically transform the data to a new data type, formatting the data in the process. Filters can also be chained, and can take optional arguments
{{ expression | filter }}
{{ expression | filter1 | filter2 }}
123 | number:2
myArray | orderBy:'timestamp':true
Filters
Friday, June 28, 13
![Page 40: Lone StarPHP 2013 - Building Web Apps from a New Angle](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c718334a7959090e8b45de/html5/thumbnails/40.jpg)
angular.module('MyReverseModule', []). filter('reverse', function() { return function(input, uppercase) { var out = "";
// ...
return out; } });
Reverse: {{greeting|reverse}}<br> Reverse + uppercase: {{greeting|reverse:true}}
Creating Filters
Friday, June 28, 13
![Page 41: Lone StarPHP 2013 - Building Web Apps from a New Angle](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c718334a7959090e8b45de/html5/thumbnails/41.jpg)
$routeProvider.
when("/not_authenticated",{controller:NotAuthenticatedCtrl, templateUrl:"app/not-authenticated.html"}).
when("/databases", {controller:DatabasesCtrl, templateUrl:"app/databases.html"}).
when("/databases/add", {controller:AddDatabaseCtrl, templateUrl:"app/add-database.html"}).
otherwise({redirectTo: '/databases'});
Routing
•http://example.org/#/not_authenticated•http://example.org/#/databases•http://example.org/#/databases/add
Friday, June 28, 13
![Page 42: Lone StarPHP 2013 - Building Web Apps from a New Angle](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c718334a7959090e8b45de/html5/thumbnails/42.jpg)
Services
Angular services are singletons that carry out specific tasks common to web apps. Angular provides a set of services for common operations.
•$location - parses the URL in the browser address. Changes to $location are reflected into the browser address bar•$http - facilitates communication with the remote HTTP servers via the browser's XMLHttpRequest object or via JSONP•$resource - lets you interact with RESTful server-side data sources
http://docs.angularjs.org/guide/dev_guide.services
Friday, June 28, 13
![Page 43: Lone StarPHP 2013 - Building Web Apps from a New Angle](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c718334a7959090e8b45de/html5/thumbnails/43.jpg)
+
Friday, June 28, 13
![Page 44: Lone StarPHP 2013 - Building Web Apps from a New Angle](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c718334a7959090e8b45de/html5/thumbnails/44.jpg)
• REST API• Silex + responsible-service-provider• Symfony2 + RestBundle• ZF2 + ZfrRest
• WebSockets • React/Ratchet• node.js
• AngularJS + Twig = Awesoness• AngularJS + Assetic = Small footprint
+
Friday, June 28, 13
![Page 45: Lone StarPHP 2013 - Building Web Apps from a New Angle](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c718334a7959090e8b45de/html5/thumbnails/45.jpg)
<div> {{name}} </div> <!-- rendered by twig -->
{% raw %}<div> {{name}} </div> <!-- rendered by AngularJS -->{% endraw %}
AngularJS + Twig - Avoid conflicts
+
// application module configuration$interpolateProvider.startSymbol('[[').endSymbol(']]')
....
<div> [[name]] </div> <!-- rendered by AngularJS -->
Friday, June 28, 13
![Page 46: Lone StarPHP 2013 - Building Web Apps from a New Angle](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c718334a7959090e8b45de/html5/thumbnails/46.jpg)
// _users.html.twig<script type="text/ng-template" id="users.html">...</script>
// _groups.html.twig<script type="text/ng-template" id="groups.html">...</script>
// index.html.twig
{% include '_users.html.twig' %}{% include '_groups.html.twig' %}
AngularJS + Twig - Preload templates
+
Friday, June 28, 13
![Page 47: Lone StarPHP 2013 - Building Web Apps from a New Angle](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c718334a7959090e8b45de/html5/thumbnails/47.jpg)
{% javascripts
"js/angular-modules/mod1.js""js/angular-modules/mod2.js""@AppBundle/Resources/public/js/controller/*.js"
output="compiled/js/app.js"
%}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
AngularJS + Assetic - Combine & minimize
+
Friday, June 28, 13
![Page 48: Lone StarPHP 2013 - Building Web Apps from a New Angle](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c718334a7959090e8b45de/html5/thumbnails/48.jpg)
+
Podisum http://github.com/pgodel/podisum
gitDVR http://github.com/pgodel/gitdvr
Generates summaries of Logstash events Silex appTwig templatesREST APIAdvanced UI with AngularJS
Replays git commits
Friday, June 28, 13
![Page 49: Lone StarPHP 2013 - Building Web Apps from a New Angle](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c718334a7959090e8b45de/html5/thumbnails/49.jpg)
+
Podisum
Apache access_log Logstash
Redis
Podisum redis-client
MongoDB
Podisum Silex App
Web Client
Friday, June 28, 13
![Page 50: Lone StarPHP 2013 - Building Web Apps from a New Angle](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c718334a7959090e8b45de/html5/thumbnails/50.jpg)
Show me the CODE!
+
Friday, June 28, 13
![Page 51: Lone StarPHP 2013 - Building Web Apps from a New Angle](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c718334a7959090e8b45de/html5/thumbnails/51.jpg)
•http://ngmodules.org/•http://angular-ui.github.io/•https://github.com/angular/angularjs-batarang•https://github.com/angular/angular-seed•https://github.com/angular-adaptive/adaptive-speech •Animations http://bit.ly/Z4WD7X •Test REST APIs with Postman Chrome Extension
Extras
Friday, June 28, 13
![Page 52: Lone StarPHP 2013 - Building Web Apps from a New Angle](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c718334a7959090e8b45de/html5/thumbnails/52.jpg)
Questions?
+
Friday, June 28, 13
![Page 53: Lone StarPHP 2013 - Building Web Apps from a New Angle](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c718334a7959090e8b45de/html5/thumbnails/53.jpg)
Thank you!
Rate Me Please! https://joind.in/8695Slides: http://slideshare.net/pgodel
Twitter: @pgodelE-mail: [email protected]
Friday, June 28, 13