A Whirlwind Tourof Software Development      By Jackie Ta
Topics• Common terminology  • Front-end vs back-end  • Languages vs frameworks• Building blocks of a web application• Comm...
Common Terminology               Front-end vs Back-end             Front-End                          Back-EndEncompasses ...
Common Terminology          Languages vs FrameworksA Framework is a collection of code libraries thatencapsulate common or...
Common Languages and Frameworks    Javascript          C#         PHP              Ruby•   JQuery         • ASP.Net   • Ca...
Anatomy of a Web Application• Content -> HTML• Styling -> CSS• Action -> Javascript(There is some blurring of roles. Html ...
Anatomy of a Web Application                  The DOMThe (D)ocument (O)bject (M)odel is a hierarchical mapping ofthe web p...
Anatomy of a Web Application               The DOM (cont’d)Consider the following tag:        <div id=« titleSection »>Fun...
Common Technology StacksWeb Server               Data Storage         Web                                              Fra...
Evolution of Design Patterns•   Trends•   More capable browsers•   Faster internet connections•   Need to support multiple...
What NOT to do (courtesy of xkcd)
Take it to the Next Level                 Presentation Layer• Better style  • LESS or SASS for less repetitive code  • Res...
Take it to the Next Level                        Testing• Client-side testing    • Jasmine    • JSUnit•   Unit Testing•   ...
Take it to the Next Level            Development Processes•   Agile (Scrum, Kanban)•   Test-driven development (TDD)•   Be...
Take it to the Next Level               Design Patterns• Planning with security in mind (PCMA  compliance, etc)• Dependenc...
Take it to the Next Level              Planning for mobile•   Mobile-enabled web site versus native apps•   Android versus...
Take it to the Next Level                    Scaling Up•   Caching•   Message queuing (fire and forget)•   Working in para...
Wrap-up• Questions?• Next up: Individual presentations on technology  stacks
Upcoming SlideShare
Loading in...5
×

Women Who Code, Ground Floor

496

Published on

30,000 foot overview of all things coding.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
496
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Check experience level of attendees. Talk about goals for the evening.
  • Review goals again – lay foundation, give people ideas on areas to work on
  • Women Who Code, Ground Floor

    1. 1. A Whirlwind Tourof Software Development By Jackie Ta
    2. 2. Topics• Common terminology • Front-end vs back-end • Languages vs frameworks• Building blocks of a web application• Common technology stacks and who uses them• Already coding? Take it to the next level!
    3. 3. Common Terminology Front-end vs Back-end Front-End Back-EndEncompasses anything done on the Encompasses anything done onbrowser. This includes: the server. Server-side code might do any of the following:• HTML• CSS • Authentication / authorization• Javascript • Database updates or retrieval • Send emails • Web service calls
    4. 4. Common Terminology Languages vs FrameworksA Framework is a collection of code libraries thatencapsulate common or useful functionality.Common areas of functionality:• Data access• Sessioning• Parsing HTTP objects• Caching• Templating
    5. 5. Common Languages and Frameworks Javascript C# PHP Ruby• JQuery • ASP.Net • CakePHP • Rails• CoffeeScript • MVC • WordPress• Node.js • Web API • Drupal• Backbone.js Java Python Javascript• Spring • Django • CoffeeScript• Grails • jQuery • Pylons • Node.js
    6. 6. Anatomy of a Web Application• Content -> HTML• Styling -> CSS• Action -> Javascript(There is some blurring of roles. Html can contain styling.CSS can animate as well as style. Javascript is often used fordynamic styling.)They are all tied together by the DOM(Document Object Model).
    7. 7. Anatomy of a Web Application The DOMThe (D)ocument (O)bject (M)odel is a hierarchical mapping ofthe web page by the browser.Anything surrounded by HTML tags (elements) goes into theDOM. Also, all elements denoted by « class » or « id » attributesgoes into the DOM. You cannot « act » on an element (viaJavascript) till it is put in the DOM.The DOM is built from top to bottom. Learning how the DOMloads is very helpful for performance-tuning your page.
    8. 8. Anatomy of a Web Application The DOM (cont’d)Consider the following tag: <div id=« titleSection »>Funny Headline</div>You can access this either by the id attribute or by tag name.In CSS: #titleSection { color: red; } Or div { color: red; }In Javascript: document.getElementById(« titleSection »).click(); Or document.getElementsByTagName(« div »)They all work by accessing the DOM.
    9. 9. Common Technology StacksWeb Server Data Storage Web Framework Java C# PHP Ruby• Apache • IIS • Apache • Passenger• Oracle • SQL Server • mySQL • mySQL• Spring • ASP.Net/MVC • CakePHP • Rails
    10. 10. Evolution of Design Patterns• Trends• More capable browsers• Faster internet connections• Need to support multiple devices• One giant page• Separating style from content -> CSS• Add client dynamics -> Javascript (ecma script)• Adding server dynamics• Moving presentation logic back to client
    11. 11. What NOT to do (courtesy of xkcd)
    12. 12. Take it to the Next Level Presentation Layer• Better style • LESS or SASS for less repetitive code • Responsive design using Media Queries• Faster and more dynamic pages • Ajax • Javascript frameworks (e.g., jQuery, node.js) • Javascript templating • Consolidate and minify style and script files• Planning for search engine optimization (SEO)
    13. 13. Take it to the Next Level Testing• Client-side testing • Jasmine • JSUnit• Unit Testing• Mocking frameworks• Integration Testing• Load testing• Diagnostic logging and tracing
    14. 14. Take it to the Next Level Development Processes• Agile (Scrum, Kanban)• Test-driven development (TDD)• Behavior-driven development (BDD)• Continuous integration (CI)• Pair programming (XP)
    15. 15. Take it to the Next Level Design Patterns• Planning with security in mind (PCMA compliance, etc)• Dependency injection• Separation of concerns• Single responsibility principle• Common patterns (singleton, factory, repository, etc)
    16. 16. Take it to the Next Level Planning for mobile• Mobile-enabled web site versus native apps• Android versus iPhone• Responsive design• Paradigm shift (rock versus boulder)
    17. 17. Take it to the Next Level Scaling Up• Caching• Message queuing (fire and forget)• Working in parallel (async processing)• Moving more work to browser• Database tuning• Load balancing• Moving to the cloud
    18. 18. Wrap-up• Questions?• Next up: Individual presentations on technology stacks
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×