Developing For The Web


Published on

Developing for the Web: Presented by Aleem Bawany at PASHA Career Expo 2008.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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

No notes for slide
  • Developing For The Web

    1. 1. Developing for the Web Aleem Bawany July 20, 2008 P@SHA Career Expo, Marriot Karachi [email_address]
    2. 2. Outline <ul><li>Development Methodologies </li></ul><ul><ul><li>Always beta; Iterative design; Top down design; Tools & APIs. </li></ul></ul><ul><li>AJAX </li></ul><ul><ul><li>Intro; Selling points; Good practices </li></ul></ul><ul><li>Performance </li></ul><ul><ul><li>Caching; GZIP; Images etc </li></ul></ul><ul><li>Usability </li></ul><ul><ul><li>Basic usability guidelines to adhere to </li></ul></ul>
    3. 3. Development Methodologies: Always Beta <ul><li>Develop early </li></ul><ul><li>Deploy early </li></ul><ul><li>Fail fast and cheap </li></ul><ul><li>Get early feedback </li></ul><ul><li>Benchmark performance </li></ul>
    4. 4. Develop Early… <ul><li>Don’t go out building a ship, build a boat first. </li></ul><ul><li>Web dev is cheap . Cheaper to fix bugs, cheaper to deploy, cheaper to prototype, cheaper to test. Bigger community, more tools, more source code. </li></ul><ul><li>If windows finds a bug, it has to ship a patch to millions of PCs. It’s cheaper to spend a month testing the hell out of it than to find a bug later. Hence the waterfall cycle and release scheduling. </li></ul><ul><li>Gmail has fixed bugs in under 24 hours! That’s fast turnaround . </li></ul><ul><li>Simplicity is beauty. Occam’s razor : Everything should be made as simple as possible, but not simpler. </li></ul>
    5. 5. … and Deploy Early <ul><li>Doesn’t mean you deploy a half baked design. </li></ul><ul><li>Target a quicker launch. Features can come later. Deliver a strong core product now. </li></ul><ul><li>You get early feedback . User feedback is a great motivator and provides insight. </li></ul><ul><li>You can measure conversions & metrics early. </li></ul><ul><li>Fail fast . Failing fast is failing cheaply. If your drag and drop widget layout gets a poor response, focus on higher yield features. If it gets a good response, offer more customization features. </li></ul>
    6. 6. DE & DE: Wrap-up <ul><li>Get things done economically . </li></ul><ul><li>Don’t neglect scale and performance. </li></ul><ul><li>What if initial design can’t scale? It’s a sign of success. Good problem to have. Continually outgrow yourself. Besides, designing for a million daily hits is diff from designing for 10K. </li></ul><ul><li>Exceeding personal expectations is healthy . Realizing time spent was not worth it is a bummer. </li></ul>
    7. 7. User Centric Design <ul><li>Developers like to focus on the architecture and neglect the user. </li></ul><ul><li>Developers aren’t user friendly. </li></ul><ul><li>Linux is developer oriented. Great for students & techies but lousy for everyone else (lawyers, chemists, parents, accountants) </li></ul><ul><li>Apple, Microsoft spend millions on usability studies (v-buffer, icon shadows, infinite edges etc). Users first, databases later. </li></ul><ul><li>Not a stipulation but please be considerate . </li></ul><ul><li>“ Any sufficiently advanced technology is indistinguishable from magic.” – Arthur C. Clark </li></ul>
    8. 8. Why AJAX <ul><li>The web has been longing for it. Why refresh/repaint the whole interface if the user wants to delete a single line (e.g. delete mail in GMail). </li></ul><ul><li>A synchronous overcomes the screen refresh problem . </li></ul><ul><li>JA vascript over comes screen repaint problem . DOM updates small bits of UI on the fly. JS also facilitates async plumbing. </li></ul><ul><li>X ML enables data interchange. Being taken over by JSON (more later) </li></ul>
    9. 9. AJAX History <ul><li>Netscape introduced LiveScript later named JavaScript (SUN + NS) </li></ul><ul><li>XMLHttpRequest was released as part of IE 5 (Mar, 1999). Originally developed for Outlook Web Access 2000: var xmlhttp = new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;); </li></ul><ul><li>Freed JS to talk to the outside world </li></ul><ul><li>GMail and Google Maps brought this to the masses </li></ul><ul><li>Came to be labelled as AJAX and gained notoriety and gave rise to a new breed of web apps </li></ul><ul><li>Neat hacks prior to XMLHttpRequest: Progressively rendered GIF/iFrames to achieve similar affect? </li></ul>
    10. 10. The X in AJAX <ul><li>XML used as data interchange </li></ul><ul><li>XML to manage and manipulate data </li></ul><ul><li>Early demos used JS to render XML as HTML formatted pages </li></ul><ul><li>XHTML allowed the DOM to be predictable and proper </li></ul><ul><li>JSON is now preferred for many scenarios </li></ul><ul><li>JSON is intuitive and fast. Can pass objects between PHP/ASP/etc and JS </li></ul><ul><li>XML has overheads: parsing, validating, converting to object, updating in-memory XML Tree and converting back to XML string </li></ul><ul><li>Working with Person object simpler than an XML representation </li></ul>
    11. 11. AJAX is fast <ul><li>AJAX requests are small. Can updates a single line instead of the whole page. Granular updates . </li></ul><ul><li>The bigger the page, higher the performance gain. </li></ul>
    12. 12. Leads to better design <ul><li>Leads to better design. Server/Client decoupling . Web Services model. </li></ul><ul><li>RESTful architecture simply works ( GET/POST/PUT over HTTP ). No firewall issues etc. </li></ul><ul><li>Promotes good API design . GMail has a great web API. Works cross-platform : to GTalk (Desktop client), Google ig (Web), iPhone (OS X gadget), etc. </li></ul><ul><li>Has led to a lot of cross-browser libraries/APIs: Prototype, JQuery, MooTools, Dojo, Scriptaculous (use transitions/animations sparingly). </li></ul><ul><li>Fewer HTTP connections to server to download js/css only once. </li></ul>
    13. 13. Limitations <ul><li>AJAX request limited to current domain (just like cookies) to avoid security hacks </li></ul><ul><li>Dynamically rendered/updated pages have no browser history or bookmarking . Can be worked around using URL fragments # which update URL without refreshing the page) </li></ul><ul><li>Web Crawlers cannot get to content (neither can email harvesters) </li></ul>
    14. 14. AJAX Demo <ul><li>Simple server/client (client.php, script.js) </li></ul><ul><li>JSON (emails.php, scriptc.js) </li></ul><ul><li>Prototype.js (Protoclient.js) </li></ul>
    15. 15. Performance (big ones) <ul><li>Use GZIP Compression </li></ul><ul><ul><li>.htaccess, ASP/PHP </li></ul></ul><ul><ul><li>The web is mostly text data which is great for compression </li></ul></ul><ul><li>Smart Caching </li></ul><ul><ul><li>Leverage client caching (HTTP expires header) </li></ul></ul><ul><ul><li>Use cached HTML instead of re-rendering ASP/PHP pages </li></ul></ul><ul><li>If you aren’t doing these two and focusing on other optimizations, you may want to reconsider </li></ul>
    16. 16. Performance <ul><li>Be wary of JS memory leaks </li></ul><ul><li>Preloading images in the background (flickr). Performance is client oriented (even though image may never be loaded). </li></ul><ul><li>Using caching and expiration smartly (set expire 10 years ahead to utilize client caching) </li></ul><ul><li>Be wary of load order of page elements. Load content first then focus on loading advertisements etc. Again, user-centric design. </li></ul><ul><li>Optimize Images (JPEG quality, GIF color palette). Use Progressive rendering. Break up large images into multiple images (allows parallel loading) </li></ul>
    17. 17. Usability <ul><li>Inverse pyramid writing style. Conclusion of article first, details later </li></ul><ul><li>Page above screen fold (no scrolling required) is prime real estate </li></ul><ul><li>Use live bread crumbs (live meaning they can be clicked) </li></ul><ul><li>Keep the information hierarchical and menus nested (organized navigation will automatically promote organized design) </li></ul><ul><li>Users should know where they are, how they got there and where they can go from here. Give users context . </li></ul><ul><li>Be wary of fonts faces, good use of white space, long lines </li></ul><ul><li>User friendly errors (users don’t understand .NET or SQL errors) </li></ul>
    18. 18. Wrap Up <ul><li>Rethink the way you are developing web apps and target quick a launch </li></ul><ul><li>Design should be user-centric </li></ul><ul><li>Start using AJAX </li></ul><ul><li>Evaluate and adopt a library (prototype.js). Build APIs </li></ul><ul><li>Start using compression ( GZIP ) </li></ul><ul><li>Use smarter Caching </li></ul>
    19. 19. Thank you <ul><li>Contact me at [email_address] </li></ul><ul><li>Slides will be sent via email </li></ul><ul><li>Please provide your email addresses. We won’t send more than 2 emails to you asking you if you are interested in continuing the discussion </li></ul>