KEMBAR78
Web development tips and tricks | PPTX
Web
 development
Tips and tricks
   By Mahmoud AlZarroug
Highlights
• Definition

• Architecture
  o Storage Tier
  o Server Tier
  o Client Tier

• Common tips
A Web application is..
• An application that utilizes Web browsers to
  accomplish one or more tasks over a network

• It can be a simple static page or as advanced as a
  social network

• Examples:
   o Twitter, Google Search, Facebook, GMail, Angry
     Birds (HTML5 version).. etc
Architecture
Web applications
Client-Server
communication
Storage Tier
Storage Tier
Where information is stored and retrieved.
What to choose?
Relational database
    • Utilize relationship between tables

    • Flexible

    • Easy to update/delete records

    • Avoids duplicate data
NoSQL database
  • Schema-less approach

  • Easy to Scale

  • Fast !
What database to choose?

 Depends on your Software
 requirements
Server Tier
Server side scripting
Key rules
• Security

• Performance

• Scalability
Server Tier: Security
• Cross Site Scripting (XSS):
   o enables attackers to inject client-side script into Web pages
     viewed by other users
• SQL injection:
   o done by passing SQL statements in an entry field in an attempt to
     get the website to pass rogue SQL command to the database
• denial-of-service attack (DoS attack):
   o an attempt to make a machine or network resource unavailable
     to its intended users
• Remote code execution:
   o ability to execute any commands of the attacker's choice on a
     target machine or in a target process
Server Tier: Performance
• Minimize response time
• Code matters !!
  o   Find the simplest solution to a problem
  o   Avoid too many database calls
  o   Merge loops
  o   Review your algorithms
Server Tier: Performance
• Cache pages

• Cache database queries

• Use “Cache-Control” headers

• Cache function returns
Server Tier: Performance
• Merge JavaScript in a single file

• Merge CSS in a single file

• Compress CSS and JS in production
Server Tier: Scalability
• The ability of a system to handle a growing
  amount of work in a capable manner or its
  ability to be enlarged to accommodate
  that growth
Scalability methods
Client Tier
Client Tier
• Client Side Programming

• User Experience

• Browsers Compatibility
Client Side Programming



          Flash
User Experience
1. Make pages load faster
2. Don’t make the user think
  Use clear navigation, clear language, clear layout
3. First Impressions Matter
4. Show Your Credentials
  Buy a SSL cert if required, write copyrights professionally
5. Remove stuff
  Cluttered content, ads
Browsers Compatibility
You will definitely hate this guy
How to avoid it?
• First step to avoid browsers compatibility issues is to
  know your users and the most common browsers
  between them

• Minimize using CSS3 and HTML5 if possible or use an
  alternative depends on the browser

• Use JS frameworks/libraries like Jquery or MooTools
Common Web
           development tips
• For rapid development use MVC frameworks:
   o CodeIgniter, CakePHP, Django, ASP.NET

• Use Cloud solutions for server architecture:
   o Amazon AWS, IBM Cloud, Azure

• “Simplicity is the soul of efficiency”
   o -Austin Freeman


• “Make it Work Before You Make it Fast”
   o -Brian Smits
Questions?

Contact me anytime at:
      mahmoud @ acadox .com

Or Twitter:   @MaXo

Web development tips and tricks

  • 1.
    Web development Tips andtricks By Mahmoud AlZarroug
  • 2.
    Highlights • Definition • Architecture o Storage Tier o Server Tier o Client Tier • Common tips
  • 3.
    A Web applicationis.. • An application that utilizes Web browsers to accomplish one or more tasks over a network • It can be a simple static page or as advanced as a social network • Examples: o Twitter, Google Search, Facebook, GMail, Angry Birds (HTML5 version).. etc
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
    Storage Tier Where informationis stored and retrieved.
  • 9.
  • 10.
    Relational database • Utilize relationship between tables • Flexible • Easy to update/delete records • Avoids duplicate data
  • 11.
    NoSQL database • Schema-less approach • Easy to Scale • Fast !
  • 12.
    What database tochoose? Depends on your Software requirements
  • 13.
  • 14.
  • 15.
    Key rules • Security •Performance • Scalability
  • 16.
    Server Tier: Security •Cross Site Scripting (XSS): o enables attackers to inject client-side script into Web pages viewed by other users • SQL injection: o done by passing SQL statements in an entry field in an attempt to get the website to pass rogue SQL command to the database • denial-of-service attack (DoS attack): o an attempt to make a machine or network resource unavailable to its intended users • Remote code execution: o ability to execute any commands of the attacker's choice on a target machine or in a target process
  • 17.
    Server Tier: Performance •Minimize response time • Code matters !! o Find the simplest solution to a problem o Avoid too many database calls o Merge loops o Review your algorithms
  • 18.
    Server Tier: Performance •Cache pages • Cache database queries • Use “Cache-Control” headers • Cache function returns
  • 19.
    Server Tier: Performance •Merge JavaScript in a single file • Merge CSS in a single file • Compress CSS and JS in production
  • 20.
    Server Tier: Scalability •The ability of a system to handle a growing amount of work in a capable manner or its ability to be enlarged to accommodate that growth
  • 21.
  • 22.
  • 23.
    Client Tier • ClientSide Programming • User Experience • Browsers Compatibility
  • 24.
  • 25.
    User Experience 1. Makepages load faster 2. Don’t make the user think Use clear navigation, clear language, clear layout 3. First Impressions Matter 4. Show Your Credentials Buy a SSL cert if required, write copyrights professionally 5. Remove stuff Cluttered content, ads
  • 26.
    Browsers Compatibility You willdefinitely hate this guy
  • 27.
    How to avoidit? • First step to avoid browsers compatibility issues is to know your users and the most common browsers between them • Minimize using CSS3 and HTML5 if possible or use an alternative depends on the browser • Use JS frameworks/libraries like Jquery or MooTools
  • 28.
    Common Web development tips • For rapid development use MVC frameworks: o CodeIgniter, CakePHP, Django, ASP.NET • Use Cloud solutions for server architecture: o Amazon AWS, IBM Cloud, Azure • “Simplicity is the soul of efficiency” o -Austin Freeman • “Make it Work Before You Make it Fast” o -Brian Smits
  • 29.
    Questions? Contact me anytimeat: mahmoud @ acadox .com Or Twitter: @MaXo