Feature driven agile oriented web applications
•Download as PPTX, PDF•
0 likes•873 views
The document provides an overview of feature driven agile oriented web applications. It discusses why web development is important as more businesses move online. It also covers challenges in web development and provides an agenda for covering the full spectrum of web app development, including current technologies. The document proposes developing a stock market app as an example project to demonstrate concepts. It includes wireframes and diagrams of the backend and frontend architecture for web apps.
Report
Share
Feature driven agile oriented web applications
- 1. Feature Driven Agile Oriented Web Applications Ram G Athreya
- 2. Why is Web Dev important – More and more major businesses and industries are being run on software and delivered as online services (Web Applications) – Six decades into the computer revolution, four decades since the invention of the microprocessor, and two decades into the rise of the modern Internet, all of the technology required to transform industries through software finally works and can be widely delivered at global scale. – In 2000 cost of running a Web Application was $150,000 now it is around $1,500 a month • Why Software is eating the world(By MARC ANDREESSEN)
- 3. Why is Web Dev important – The world’s largest retailer today is Amazon its core capability is software (not procurement or supply chains etc) – Largest video service is Netflix (in US) which is also a Software Company not a Cable related company – Major music companies are Spotify & iTunes not a record label
- 4. The List goes on • Retail – Amazon Software • Communication – Whatsapp, Facebook • Games – Zynga, Rovio • Entertainment – Spotify, iTunes, Pandora, Netflix • Photography – Flickr • Advertising/Marketing – Google • Telecom – Skype • Recruiting – Naukri, LinkedIn, Monster
- 5. Also Physical Industries • Cars – Android Auto, Apple AirPlay • Real World Retailer – Wal-Mart (its core is S/W) • Marketplaces – EBay • Couriers – FedEx & UPS (powered by S/W & smart analytics) • Banks – All banks have moved online • Healthcare & Education are next on the list • Health – Fitness apps, Healthkit & wearables • Education – Online platforms (Coursera, Udemy)
- 6. Challenges • First of all, every new company today is being built in the face of massive economic headwinds, making the challenge far greater than it was in the relatively benign '90s. • Secondly, many people in the U.S. and around the world lack the education and skills required to participate in the great new companies coming out of the software revolution.
- 7. Agenda • Cover the whole spectrum of web application development • Current cutting edge technology that is widely used • Suitable example that will make understanding easier
- 8. Problem Statement • Develop a single page stock market app • Features – Search Bar – Current stock price & G/L – Graph – Additional details such as Volume etc – News related to the stock – Send to E-Mail • Ideally should also work in mobile
- 9. Wireframe
- 11. Web Dev Architecture • Backend – Handle HTTP Requests & generate responses – Communicate with database – Communicate with third party APIs • Frontend – Communicate with server – Display content from server responses – Presentation of content & user interactivity
- 12. Backend Stack • Server side language • Web Framework • DBMS • Server • Environment (OS)
- 14. PHP Frameworks
- 16. DBMS
- 17. Server
- 18. Environment
- 19. The LAMP Stack • Linux • Apache • MySQL • Php
- 20. Why we need a Web Framework • MVC Architecture • URL Mapping • Web Templates & theming • Easy Database Connectivity • User management • Data Persistence • Security • Caching
- 21. MVC Architecture • Model • View • Controller
- 22. MVC in Yii
- 23. MVC Workflow in Yii
- 24. Application • The application object encapsulates the execution context within which a request is processed • Its main task is to collect some basic information about the request, and dispatch it to an appropriate controller for further processing.
- 25. URL Mapping • Pattern matching • Creating user friendly URLs
- 26. Web Templates & theming
- 27. Easy Database Connectivity • Built on top of PHP Data Objects
- 29. ORM • Object-relational mapping in computer software is a programming technique for converting data between incompatible type systems in object-oriented programming languages. This creates, in effect, a "virtual object database" that can be used from within the programming language.
- 30. ORM • Student Table – Student ID – Name – Teacher ID • Teacher Table – Teacher ID – Name
- 31. ORM class student{ public $student_id; public $name; public $teacher_id; public function rules(){ return array( array(’name', 'validateName'), // Custom validation method in this object); } public function relations() { return array( ’Teacher' => array(self::HAS_MANY, ’teacher', ’teacher_id'), ); } }
- 32. ORM • $student = Student::model()->findByPk(1); • var_dump($student->student_id) • var_dump($student->name); • var_dump($student->teacher_id);
- 33. Active Record • Active record is an architectural pattern found in software that stores its data in relational databases. • A database table or view is wrapped into a class • This pattern is commonly used by object persistence tools, and in object-relational mapping (ORM) • Typically, foreign key relationships will be exposed as an object instance of the appropriate type via a property.
- 34. Active Record • $student = Student::model()->findByPk(1); • var_dump($student->Teacher->name);
- 35. User management • Yii provides built in user management, access control & authentication mechanisms • By default a user table can used to provide access to users
- 36. Data Persistence • Generally used for session handling
- 37. Security • Cross Site Scripting Prevention (OWASP Top 10) • CSRF Prevention (OWASP Top 10) • Cookie Attack Prevention
- 38. Caching
- 39. Setup • cd WebRoot • php YiiRoot/framework/yiic.php webapp webapp-name • .htaccess configuration RewriteEngine on RewriteBase / RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_URI} !.(png|gif|ico|swf|jpe?g|js|css|ttf|svg|eot|woff)$ [NC] RewriteRule . index.php
- 41. Frontend Stack • HTML – Content • CSS – Presentation • JS – Interactivity • CSS Preprocessor • Javascript Framework • Responsive Design
- 42. Web Debugging Tools • Chrome Web Inspector • Firebug for Firefox
- 43. CSS Preprocessor
- 44. CSS Overview • Inline • Internal • External • CSS hierarchy • !important Rule • CSS Inheritance • CSS3 Transitions • CSS3 Transforms • CSS3 Animations
- 45. Inline
- 46. Internal
- 47. External
- 48. CSS Hierarchy • External < Internal < Inline
- 49. !important Rule
- 50. CSS Inheritance
- 51. CSS3 Transitions
- 52. CSS3 Transforms
- 53. CSS3 Animations
- 54. Features of CSS Preprocessors • Variables • Mixins • Nested Rules • Media query bubbling • Operations • Functions • Importing
- 55. Variables
- 56. Mixins
- 57. Nested Rules
- 59. Operations
- 60. Functions
- 61. Importing
- 62. Vector Icons • Icomoon.io • Fontastic
- 63. Importance of UI/UX • The goal of user interface design is to make the user experience and interaction with your system as simple and efficient as possible • A good experience leads to more user satisfaction & better conversions or purchases
- 64. Fedex Logo • Won over 40 design awards • Rated as one of the best designs focusing on negative space • Once you understand the significance you will never forget the brand
- 65. Skeumorphism vs Flat Design
- 66. WIMP Model • Windows • Icons • Menus • Pointer
- 67. A/B Testing
- 69. JS Overview • JS Event Loop • Objects • Callbacks • Closures • Prototypes • Inheritance
- 70. JS Event Loop
- 71. Objects • Short Quiz – Which of these is an object in JS? – Object – Function – Array Yes it is a trick question
- 72. Callbacks • Used for Asynchronous Execution
- 73. Closures
- 74. Prototypes
- 75. Inheritance • Prototypal inheritance i.e there are no classes • Instead the focus is on objects • You start by making a useful object. You can then make many more objects that are like that one. • So once we have an object that we like, we can make more instances with the Object.create() method
- 76. Inheritance
- 77. Features of JS Frameworks • DOM Element Selection • DOM Traversal & Modification • DOM manipulation • Events • Effects & Animations • AJAX • JSON Parsing • Extensibility • Utilities
- 78. DOM Element Selection • $(selector) • Selectors can be – ID – Class – Psuedo selectors
- 79. DOM Traversal & Modification • .each() • .find() • .filter() • .first() • .last() • .next() • .previous()
- 80. DOM Manipulation • .after() • .appendTo() • .attr() • .before() • .clone() • .css() • .empty()
- 81. Events • .bind() • .unbind() • .change() • .click() • .error() • .focus() • .keyup()
- 82. Effects & Animations • .animate() • .fadeIn() • .fadeTo() • .hide() • .show() • .slideUp() • .slideDown()
- 83. AJAX • URL • Settings – async – contentType – data – dataType – error �� success
- 84. AJAX
- 85. JSON Parsing
- 86. Extensibility • jQuery supports easy creation of plugins to enhance the functionality and features provided by jQuery
- 87. Utilities • .browser() • .extend() • .inArray() • .isArray() • .isEmptyObject() • .isFunction() • .isNumeric()
- 88. Recap • Understood why web development is important • Defined a problem to delve deeper into this field • Overview on Backend Development • Overview on Frontend Development • Web Debugging
- 89. HTML5 APIs • localStorage • Application Cache • GeoLocation
- 90. localStorage • Easy mechanism to store data within the browser • More secure & faster than cookies • Data stored as key/value pairs • Data is domain specific
- 91. Application Cache Application cache gives three advantages • Offline browsing - users can use the application when they're offline • Speed - cached resources load faster • Reduced server load - the browser will only download updated/changed resources from the server
- 92. Including Cache
- 93. Manifest File Manifest file has 3 sections • CACHE MANIFEST - Files listed under this header will be cached after they are downloaded for the first time • NETWORK - Files listed under this header require a connection to the server, and will never be cached • FALLBACK - Files listed under this header specifies fallback pages if a page is inaccessible
- 95. Geolocation • The HTML5 Geolocation API is used to get the geographical position of a user. • Since this can compromise user privacy, the position is not available unless the user approves it.
- 96. Responsive Web Design(RWD) Motivations • RWD is a web design approach aimed at crafting sites to provide an optimal viewing experience – easy reading and navigation – minimum of resizing, panning, and scrolling – across a wide range of devices (from mobile phones to desktop computer monitors)
- 97. RWD Approach • The fluid grid concept (percentages over pixels) • Flexible images • Media Queries
- 98. Growth of Mobile
- 99. RWD Frameworks
- 101. Features • Scaffolding • Base CSS • Components • Javascript Plugins
- 102. CDN • A content delivery network or content distribution network (CDN) is a large distributed system of servers deployed in multiple data centers across the Internet. • The goal of a CDN is to serve content to end- users with high availability and high performance.
- 103. CloudFlare
- 104. LINUX Overview • Created by Linus Torvalds in 1991 • Directory Structure • Access Control & User groups • Man Pages
- 105. Directory Structure
- 106. Access Control & User Groups • Root User • User Directories • Admin Groups • Sudo
- 107. Chmod
- 108. Chown • Changes ownership of the file or directory
- 109. Chgrp • Changes Group of the file or directory
- 110. Man Pages • Manual pages or help command provided by the OS • Contains a synopsis of the command with relevant example
- 111. Crons
- 112. Crons
- 113. Apache Configuration • Start, Stop & Shutdown • Vhosts configuration • Mod Rewrite Configuration • Basics of .htaccess configuration
- 114. Vhosts Configuration
- 116. .htaccess RewriteEngine on RewriteBase / deny from <ip address>
- 117. MySQL • RDBMS • Tables • Joins • Procedures • Views • Triggers
- 118. Tools • Netbeans • MySQL Workbench • Terminal • LESS.app • Chrome Web Inspector
- 119. Testing • Test Driven Development • Server side testing – PHP Unit • Client side testing – Jasmine
- 120. Version Control Motivations • Enabling simultaneous work • Collaboration • Archiving every version • Easy to track changes
- 121. History of version control
- 122. Deployment • PAAS vs IAAS • IAAS App Deployment • PAAS App Deployment • Heroku • 12 Factor App
- 123. PAAS vs IAAS
- 124. IAAS App Deployment
- 125. PAAS App Deployment
- 126. Heroku • Heroku is a cloud platform as a service (PaaS) supporting several programming languages • Heroku was acquired by Salesforce.com in 2010 • The base Operating System is Debian based Ubuntu(LINUX) • Provides an easy to use platform for deploying applications
- 127. 12 Factor App • Codebase • Dependencies • Config • Backing Services • Build, Release & Run • Processes • Port Binding • Concurrency
- 128. 12 Factor App • Disposability • Dev/Prod Parity • Logs • Admin Processes
- 129. Developer Workflow
- 130. Development Process
- 131. Continuous Integration • Maintain a code repository • Automate the build • Make the build self testing • Everyone commits to the baseline • Keep builds fast • Test in a clone environment • Make it easy to get latest deliverables • Everyone can see the results of the latest build • Automate Deployment
- 132. Future Technologies • Linux – VMs(probably a stripped version of LINUX) • Apache – End Point based programming • MySQL – NoSQL(MongoDB, Redis) • PHP – Node.js • jQuery – Angular, Backbone etc • SVN – Git • LESS – Don’t see a lot of change here • RWD more widely adopted
- 133. Thank You