Download as PDF, PPTX
Uploaded byClarence Ngoh
Having Fun Building Web Applications (Day 1 Slides)
This document outlines the agenda and content for Day 1 of a web applications course. The instructor will cover building the front end of web applications using HTML, CSS, JavaScript, jQuery and templating. Students will practice implementing common front end patterns and components. They will scaffold and style a matchmaking application, adding user profiles, events and APIs. The goal is to build out the front end interface without a backend, focusing on design, interactivity and data loading.
More Related Content
![[Pem zhipeng Xie] reading notes《自控力》读书笔记](https://cdn.slidesharecdn.com/ss_thumbnails/thewillpowerinstinctreadingnotspemzhipengxie-161219012039-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Similar to Having Fun Building Web Applications (Day 1 Slides)
Having Fun Building Web Applications (Day 1 Slides)
- 1. DAY 1 16Dec 9am-5pm
- 2. about me Clarence Ngoh Year2 SIS Telegram: @clarencenpy
- 3.
- 4. what i hopeto teach!
- 5. front end? practice ofproducing HTML, CSS and Javascript for a website or web application so that a user can see and interact with them directly through the web browser Why? SE and beyond - you need an interface to your app JS supports a great user experience that static pages can’t Easy to get started with so many libraries to leverage
- 6. Web apps?a client-serversoftware application in which the client (or user interface) runs in a web browser. Why? > Write Once Run Anywhere > Easy to reach a huge user base > Browsers getting better and better > BUT.. still many things we cant achieve like access hardware and filesystem, a unified payments platform, high performance > Not better than native, but Good Enough for increasing types of applications
- 7. web pages VSwebapps data on the wire html on the wire - no page refresh - javascript driven
- 8.
- 9. what we willbe building Concept / Value proposition a matchmaking application for students searching love that allows the user to match interests with other users (compatible or not?) and facilitate their budding love
- 10. what we willbe building create and update personal profile view all other users on platform check compatibility with another user matching interests astrology? send gifts rank by popularity Mock Up - Job to be done
- 11. what we willbe building Profile Card CardCard Notifications Mock Up - Page Structure
- 12. what we willbe building Course overview Day 1 Pure front end app - no server backend Page scaffolding No database, we will hardcode data
- 13. what we willbe building Course overview Day 2 Intro to Meteor. Port existing app over Database User accounts
- 14. Environment setup You willneed a text editor, use any you like, something you are familiar with! Suggested: Sublime Text, Notepad++, WebStorm Look out for features like: Syntax/error highlighting HTML tag expansion (Emmet) Auto-reformatting Auto-completion Chrome Web Browser
- 15.
- 16. Using 3rd partycode we code some, we kope some Web development about composing building blocks to create something Good programmers reuse what is already available
- 17. Using 3rd partycode we code some, we kope some Use HTML <script> tag to import src = use local copy or Content Delivery Network (CDN) Benefits of CDN include: Distributed data centers Browser caching Faster page load
- 18. Exercise 1Import jQuery Openyour web app in Chrome (no errors)
- 19. css Frameworks Get prettycomponents out of the box Help us to resolve browser differences Someone else do the hard work (eg browser prefixes) Don’t have to write your own CSS - only if you want to customise Usually come with good documentation Good way to learn CSS best practices Take your pick: Bootstrap, Foundation, Semantic
- 20. How css frameworkswork .cool { rules … } .nice { rules … } your css .red { rules … } .button { rules … } Framework css <div class=“cool red”> </div> your HTML for styling
- 21. How css frameworkswork .cool-component { rules… } Framework css lots of code… Framework JS <div class=“cool- component”> </div> your HTML $(‘.cool-component) .startPlugin() your JS for behaviour
- 22. Exercise 2Play withSemanticUI components Play with Grid System
- 23. Exercise 3Create a2 panel layout Add card for user profile
- 24.
- 25. Exercise 4Scaffold UIto display cards of other people
- 26. jquerya must havelibrary for working on the browser Help us to resolve browser differences Great documentation Super easy way to manipulate page (DOM elements) http://www.sitepoint.com/jquery-vs- raw-javascript-3-events-ajax/ Extensive plugin system
- 27. https://api.jquery.com jquery we need toknow how to… Select Elements Add Behaviour Change state .on() .click()$(…) .class() .html() $(‘.donebutton’).class(‘hidden’)
- 28. Exercise 5Create globalobject with application data Use this to generate n number of cards for other users
- 29. get organised some tips Encapsulateeverything into an object (don’t pollute the global namespace) Group related code into functions, so we know where to find/add our code init() bindEvents() loadSomething() refresh() Initialise app when Document Ready $(function)
- 30. Templating engine creating htmlstrings manually is painful https://mustache.github.io so how?
- 31. Templating engine <div class="entry"> <h1>{{name}}</h1> <divclass="body"> {{message}} </div> </div> Template + Data = HTML { name: “John” message: “hi” } <div class="entry"> <h1>John</h1> <div class="body"> Hi </div> </div> Mustache.render(template, data) how it works
- 32. Templating engine {{# }}{{# }} template helpers array boolean {{/ }} Loops Conditionals html that is displayed for every element in array html that is displayed only if boolean is true array {{/ }}boolean
- 33. Exercise 6Use Mustachetemplating!
- 34. event handling we usethe .on() jQuery method to attach a function to a DOM element DOM element rendered DOM element not yet rendered Attach callback function to element Attach callback to parent element that is already rendered, passing in additional filter argument
- 35. passing data when weattach the same event handler for multiple DOM elements, we need a way to uniquely identify each one can be attached to these elements using HTML5 Data Attributes data-<name> and retrieved with jQuery using .data(name)
- 36. Exercise 7Attach eventhandlers to Check Compatibility button, and print the person id of the clicked element to console
- 37. Javascript utilities Perform commonalgorithms with lesser pain Find item in array, looping, sorting, mapping etc. We are using Underscore.js sugary syntax for common algos
- 38. Exercise 8Implement checkcompatibility function - Display modal on click - Calculate number of common interests - Display progress bars
- 39. APIs, our bestfriend API is an agreement/contract between two people, saying that if you give me this instruction, I will execute this and do something for you. This something could be anything: sending an email, drawing a chart, fetching data etc We need an API because we are relying on some code someone else did Look at the API documentation to see what data they take in, and what is the corresponding result Application programming interface
- 40. APIs, our bestfriendApplication programming interface General Steps Download the library (if required) Get the API keys (if required) Transform your data to match their expected input Call the API!
- 41. Exercise 9Follow theAPI documentation of Vedic API to display Horoscope matching report!
- 42. Exercise 10Every timethe Check Compatibility button is clicked, increment the number of views of the person by 1 and refresh UI
- 43. End of day1https://clarencengoh.typeform.com/to/kqWcZb