Web Applications


Published on

Little presentation made for my company created to explain web applications evolution, define the people involved and show the architecture and fundamentals of frontend development.

Published in: Technology, Business
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Web Applications

  1. 1. Web ApplicationsToday
  2. 2. 1. Web Applications Evolution2. Human Resources Issue3. Architecture4. Frontend Concepts5. HomeworkAgenda
  3. 3. WWW, Web 2.0 y RealTime WebUsers1
  4. 4. WWW, Web 2.0 y RealTime WebResources1BandwidthUsers
  5. 5. 1 WWW, Web 2.0 y RealTime WebTechnologyStandardsToolsLearningCurveDevelopmentTimeTCP/IP AJAX WebSocket
  6. 6. 2 What people is involved?Designer Web MasterApplicationDeveloper
  7. 7. 2 What about the user?WebMasterApplicationDeveloperDesignerUser
  8. 8. 2 What about the resources?WebMasterApplicationDeveloperDesignerUserResources
  9. 9. 2 What about the technology?WebMasterApplicationDeveloperDesignerUserClient SideResourcesServer SideResourcesTechnology
  10. 10. Designer TechnologyUser2 Complexity or SimplicityUX Designer
  11. 11. Web MasterApplicationDeveloperClient SideResourcesTechnologyFrontendDeveloper2 Complexity or Simplicity
  12. 12. 2 Complexity or SimplicityWeb MasterApplicationDeveloperTechnologyServer SideResourcesServer SideResourcesBackendDeveloperHostingSpecialist
  13. 13. 3 ArchitectureHuman ResourcesWeb ApplicationFrontend Developer Backend DeveloperHosting Specialist (Usually Third Party or IT )UXDesignerUserDirect Interaction Experience Cycle Use Monitoring
  14. 14. 3 ArchitectureSoftwareFrontendBackendBROWSERClientDATAHTMLPreprocessorJavascriptEngineLocal StorageDOMTransportLayerCODEFrameworksLibrariesModelsSource CodeMemory
  15. 15. 4 Frontend DeveloperProfileFront End engineers give sitesstrength & resilience,appearance & form, andfunctionality & interactivity.
  16. 16. 4 Frontend DevelopmentFundamentalsCross Browsing
  17. 17. Frontend DevelopmentProgressive Enhancement4Content(HTML)Layout(CSS)Behavior(Javascript)1 2 3
  18. 18. Frontend DevelopmentSpecialization4CROSSBROWSINGHTMLCSSJavascript
  19. 19. Frontend DevelopmentBest Practices4● Always use Progressive Enhancement● Write always unobtrusive Javascript● Build a development environment to build● Use always you can pseudo-coders to generate html,css and javascript.● Avoid run javascript code at the HEAD section● Package css and javascript files in single files to beused at production time.● Use separate folders to handle libraries.● If you need to change something in a library pleasedont● If you need really change something, do an override
  20. 20. Frontend DevelopmentBest Practices4● Try to use images only for web resolutions● Try to join several small image files into a sprite● Remember, all web is about content, deliver it.● Use UTF-8 to server css and js files● Comment your code always● Use GET for Ajax Request unless payload is greaterthan 2K/IE
  21. 21. Homework5Do you consider be afrontend developer?Why?Do you think frontenddevelopers andbackend developershave different kind ofresponsibilities?Can you describewhich role are youplaying in yourprojects?How about MVC orother model patternapplied to frontend?
  22. 22. Enrique Ponce de Leon (@qennix)Development Team Leader - Colosa Inc.enrique@colosa - iam@qennix.com