SlideShare a Scribd company logo
1 of 17
The buzzwords/phrases heard most often:
• HTML5 (of course!)
• Javascript libraries & frameworks (such as jQuery)
• GitHub (open source collaboration)
• SASS (or other CSS precompilers)
• Mobile (native or web app?)
• Responsive (grids & flexibility)
• One-page Web Apps (use that client! Fewer round-
trips!)
• Web design is becoming more like software
development
• Users expect richer experience, increased
interactivity, and speed
• Device independence requires planning from back-
end to front-end
• Mobile developers unhappy with browser support and
HTML5 promises. Much talk of developing native apps
instead.
• Developer Tools and Workflow
• JavaScript Frameworks, Libraries and APIs
• HTML5
• CSS & Precompilers
• Collaborative Spaces
• Social Media
• Browser Support
• Mobile Development
• Responsive/Adaptive Design & Development
• JSHint: detect errors in JavaScript
• Testing automation:
• Deployment automation
• Yoeman: manage workflow, libraries & testing
• LiveReload: view CSS edits with no reload
• CodeKit: compiles Less, Sass, & Stylus files.
Combines, minifies & error-checks JavaScript.
• Paraphrased from Rebecca Murphey’s article at:
http://http://rmurphey.com/blog/2012/04/12/a-baseline-for-front-end-developers/
• Once upon a time, editing files, testing them locally…and then FTPing
them to the server was the essential workflow of a front-end dev…
• Something has changed in the last couple of years.
• Maybe it’s the result of people starting to take front-end dev seriously
• Maybe it’s browser vendors mostly getting their sh** together
• Or maybe it’s front-end devs …see[ing the] light about the process of
software development…
Here are some helpful tools (per Paul Irish, Mike Taylor, Angus Croll, and Vlad
Filippov)
• JavaScript
• Git (and a GitHub account)
• Modularity, dependency management and production builds
• In-Browser Developer Tools
• Command line
• Client-side templating
• CSS preprocessors
• Testing
• Process automation
• Code quality
• MDN - collaborative front-end development documentation
• Go to a library and start reading books.
• If you are the application then the collection of books is
the library.
• The shelves, the cupboards, and the compound that
houses all this constitutes the framework.
• Everything you come in contact while performing the task
of reading the books is the API.
• Dojo
• Enyo
• Ext JS
• Google Web Toolkit
• jQuery
• Midori
• MochiKit
• MooTools
• Prototype
• Qooxdoo
• Ember
• Underscore
• JavaScriptMVC
• Spine
• Backbone
• Knockout
• Sammy
• Angular
• SproutCore
Precompilers allow the use of variables, conditionals,
nested rules, mixins, and operations in CSS and then
parse it to regular styles. These are a few of the most
popular precompilers and authoring frameworks:
• SASS: Ruby
• Less: PHP
• Stylus:
• Compass: CSS3 authoring framework with mixins,
functions, and helpers for SASS.
• CodeKit: compiles Less, Sass, Stylus, and more.
• GitHub: Uses Git (fast, efficient, distributed
version control system for collaborative
development.)
• Beanstalk: Uses Subversion, Mercurial, Git.
• Google Code Hosting:
• Bitbucket:
Create mobile applications for iOS, Android, Blackberry, Windows
Phone, Palm WebOS, Bada and Symbian using the HTML, CSS and
JavaScript.
There was so much information, and so many great
resources to investigate. Can’t possibly put them all in
this presentation (however, initially, I did try! Whew!)
Please refer to Confluence for further investigation.
Also, I will continue my research into many of these
technologies on edydawsonwebdev.wordpress.com
Thank you!

More Related Content

What's hot

Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2
Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2
Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2
Jeremy Likness
 

What's hot (20)

Bayt training
Bayt trainingBayt training
Bayt training
 
What is front-end development ?
What is front-end development ?What is front-end development ?
What is front-end development ?
 
'Less' css
'Less' css'Less' css
'Less' css
 
Web designing course content
Web designing course contentWeb designing course content
Web designing course content
 
Javascript for Wep Apps
Javascript for Wep AppsJavascript for Wep Apps
Javascript for Wep Apps
 
Jquery
JqueryJquery
Jquery
 
Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2
Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2
Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2
 
Debugging WordPress
Debugging WordPressDebugging WordPress
Debugging WordPress
 
WordPress as a CMS (short version)
WordPress as a CMS (short version)WordPress as a CMS (short version)
WordPress as a CMS (short version)
 
BackboneJS
BackboneJSBackboneJS
BackboneJS
 
Taming 3rd party content
Taming 3rd party contentTaming 3rd party content
Taming 3rd party content
 
Webpack: What it is, What it does, Whether you need it
Webpack: What it is, What it does, Whether you need itWebpack: What it is, What it does, Whether you need it
Webpack: What it is, What it does, Whether you need it
 
Dangerous CSS
Dangerous CSSDangerous CSS
Dangerous CSS
 
From Junior Dev to Senior Dev
From Junior Dev to Senior DevFrom Junior Dev to Senior Dev
From Junior Dev to Senior Dev
 
Exploring Content API Options - March 23rd 2016
Exploring Content API Options - March 23rd 2016Exploring Content API Options - March 23rd 2016
Exploring Content API Options - March 23rd 2016
 
Jumpstart Your Web App
Jumpstart Your Web AppJumpstart Your Web App
Jumpstart Your Web App
 
Unobtrusive javascript
Unobtrusive javascriptUnobtrusive javascript
Unobtrusive javascript
 
WordPress as an Application Framework
WordPress as an Application FrameworkWordPress as an Application Framework
WordPress as an Application Framework
 
Bringing a Design Language to Life
Bringing a Design Language to LifeBringing a Design Language to Life
Bringing a Design Language to Life
 
Social Sciences Librarians Boot Camp 2012: Zotero and Mendeley
Social Sciences Librarians Boot Camp 2012: Zotero and MendeleySocial Sciences Librarians Boot Camp 2012: Zotero and Mendeley
Social Sciences Librarians Boot Camp 2012: Zotero and Mendeley
 

Similar to Edy Dawson Notes on SF HTML5 Dev Conf

Choosing the best JavaScript framework/library/toolkit
Choosing the best JavaScript framework/library/toolkitChoosing the best JavaScript framework/library/toolkit
Choosing the best JavaScript framework/library/toolkit
Hristo Chakarov
 

Similar to Edy Dawson Notes on SF HTML5 Dev Conf (20)

Building Enterprise Grade Front-End Applications with JavaScript Frameworks
Building Enterprise Grade Front-End Applications with JavaScript FrameworksBuilding Enterprise Grade Front-End Applications with JavaScript Frameworks
Building Enterprise Grade Front-End Applications with JavaScript Frameworks
 
Frameworks Galore: A Pragmatic Review
Frameworks Galore: A Pragmatic ReviewFrameworks Galore: A Pragmatic Review
Frameworks Galore: A Pragmatic Review
 
Choosing the best JavaScript framework/library/toolkit
Choosing the best JavaScript framework/library/toolkitChoosing the best JavaScript framework/library/toolkit
Choosing the best JavaScript framework/library/toolkit
 
Clojurescript slides
Clojurescript slidesClojurescript slides
Clojurescript slides
 
Greenfield Java 2013
Greenfield Java 2013Greenfield Java 2013
Greenfield Java 2013
 
Be faster then rabbits
Be faster then rabbitsBe faster then rabbits
Be faster then rabbits
 
DIGIT Noe 2016 - Overview of front end development today
DIGIT Noe 2016 - Overview of front end development todayDIGIT Noe 2016 - Overview of front end development today
DIGIT Noe 2016 - Overview of front end development today
 
After the LAMP, it's time to get MEAN
After the LAMP, it's time to get MEANAfter the LAMP, it's time to get MEAN
After the LAMP, it's time to get MEAN
 
Single Page Applications - Desert Code Camp 2012
Single Page Applications - Desert Code Camp 2012Single Page Applications - Desert Code Camp 2012
Single Page Applications - Desert Code Camp 2012
 
The Great Consolidation - Entertainment Weekly Migration Case Study - SANDcam...
The Great Consolidation - Entertainment Weekly Migration Case Study - SANDcam...The Great Consolidation - Entertainment Weekly Migration Case Study - SANDcam...
The Great Consolidation - Entertainment Weekly Migration Case Study - SANDcam...
 
Javascript Best Practices and Intro to Titanium
Javascript Best Practices and Intro to TitaniumJavascript Best Practices and Intro to Titanium
Javascript Best Practices and Intro to Titanium
 
Meetup. Technologies Intro for Non-Tech People
Meetup. Technologies Intro for Non-Tech PeopleMeetup. Technologies Intro for Non-Tech People
Meetup. Technologies Intro for Non-Tech People
 
Frontend as a first class citizen
Frontend as a first class citizenFrontend as a first class citizen
Frontend as a first class citizen
 
20120306 dublin js
20120306 dublin js20120306 dublin js
20120306 dublin js
 
JS - The Unknown Basics.pptx
JS - The Unknown Basics.pptxJS - The Unknown Basics.pptx
JS - The Unknown Basics.pptx
 
Building SPA’s (Single Page App) with Backbone.js
Building SPA’s (Single Page App) with Backbone.jsBuilding SPA’s (Single Page App) with Backbone.js
Building SPA’s (Single Page App) with Backbone.js
 
Single page application and Framework
Single page application and FrameworkSingle page application and Framework
Single page application and Framework
 
End-to-end W3C APIs
End-to-end W3C APIsEnd-to-end W3C APIs
End-to-end W3C APIs
 
Women Who Code, Ground Floor
Women Who Code, Ground FloorWomen Who Code, Ground Floor
Women Who Code, Ground Floor
 
Bridging the gap between UX and development – A Storybook
Bridging the gap between UX and development – A StorybookBridging the gap between UX and development – A Storybook
Bridging the gap between UX and development – A Storybook
 

Recently uploaded

Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 

Recently uploaded (20)

Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu SubbuApidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024
 

Edy Dawson Notes on SF HTML5 Dev Conf

  • 1.
  • 2. The buzzwords/phrases heard most often: • HTML5 (of course!) • Javascript libraries & frameworks (such as jQuery) • GitHub (open source collaboration) • SASS (or other CSS precompilers) • Mobile (native or web app?) • Responsive (grids & flexibility) • One-page Web Apps (use that client! Fewer round- trips!)
  • 3. • Web design is becoming more like software development • Users expect richer experience, increased interactivity, and speed • Device independence requires planning from back- end to front-end • Mobile developers unhappy with browser support and HTML5 promises. Much talk of developing native apps instead.
  • 4. • Developer Tools and Workflow • JavaScript Frameworks, Libraries and APIs • HTML5 • CSS & Precompilers • Collaborative Spaces • Social Media • Browser Support • Mobile Development • Responsive/Adaptive Design & Development
  • 5. • JSHint: detect errors in JavaScript • Testing automation: • Deployment automation • Yoeman: manage workflow, libraries & testing • LiveReload: view CSS edits with no reload • CodeKit: compiles Less, Sass, & Stylus files. Combines, minifies & error-checks JavaScript.
  • 6. • Paraphrased from Rebecca Murphey’s article at: http://http://rmurphey.com/blog/2012/04/12/a-baseline-for-front-end-developers/ • Once upon a time, editing files, testing them locally…and then FTPing them to the server was the essential workflow of a front-end dev… • Something has changed in the last couple of years. • Maybe it’s the result of people starting to take front-end dev seriously • Maybe it’s browser vendors mostly getting their sh** together • Or maybe it’s front-end devs …see[ing the] light about the process of software development…
  • 7. Here are some helpful tools (per Paul Irish, Mike Taylor, Angus Croll, and Vlad Filippov) • JavaScript • Git (and a GitHub account) • Modularity, dependency management and production builds • In-Browser Developer Tools • Command line • Client-side templating • CSS preprocessors • Testing • Process automation • Code quality • MDN - collaborative front-end development documentation
  • 8. • Go to a library and start reading books. • If you are the application then the collection of books is the library. • The shelves, the cupboards, and the compound that houses all this constitutes the framework. • Everything you come in contact while performing the task of reading the books is the API.
  • 9. • Dojo • Enyo • Ext JS • Google Web Toolkit • jQuery • Midori • MochiKit • MooTools • Prototype • Qooxdoo • Ember • Underscore • JavaScriptMVC • Spine • Backbone • Knockout • Sammy • Angular • SproutCore
  • 10.
  • 11. Precompilers allow the use of variables, conditionals, nested rules, mixins, and operations in CSS and then parse it to regular styles. These are a few of the most popular precompilers and authoring frameworks: • SASS: Ruby • Less: PHP • Stylus: • Compass: CSS3 authoring framework with mixins, functions, and helpers for SASS. • CodeKit: compiles Less, Sass, Stylus, and more.
  • 12. • GitHub: Uses Git (fast, efficient, distributed version control system for collaborative development.) • Beanstalk: Uses Subversion, Mercurial, Git. • Google Code Hosting: • Bitbucket:
  • 13.
  • 14.
  • 15. Create mobile applications for iOS, Android, Blackberry, Windows Phone, Palm WebOS, Bada and Symbian using the HTML, CSS and JavaScript.
  • 16.
  • 17. There was so much information, and so many great resources to investigate. Can’t possibly put them all in this presentation (however, initially, I did try! Whew!) Please refer to Confluence for further investigation. Also, I will continue my research into many of these technologies on edydawsonwebdev.wordpress.com Thank you!