Rapid Cross-Device Development

These are the slides from my talk at Staffs Web Meetup in March 2015.

The slides give a quick overview into how the industry developed from a single web browser through to multiple browsers, multiple Operating Systems and then multiple devices.

The second half of the talk was an introduction to BrowserSync.io.

Transcript

1. Andrew McCombe / @euperia Staffs Web Meetup, 19th March 2015 Rapid Cross-Device Development
2. Who am I? • Web developer since 1997. • Work at iWeb. • Mainly a PHP developer with frontend and Sys-admin experience. • www.euperia.com • @euperia
3. In the beginning... There was Netscape Navigator
4. In the beginning... • Development was done in a basic text editor. • Save file, switch to browser, hit F5. • Make a change. • Save file, switch to browser, hit F5.
5. Then there were more...
6. So development was... • Done in a basic text editor. • Save file, switch to TWO browsers, hit F5. • Make a change. • Save file, switch to TWO browsers, hit F5.
7. and then...
8. So development was... • Basic text editor or specialised software. • Save file, switch to four browsers, hit F5 on each. • Change computer, switch to browsers, hit F5 on each. • Make a change. Repeat.
9. So, this happened...
10. followed by...
12. What if... You could just edit your file, save it, and everything reloads?
14. Overview • Node.js based (requires npm and node.js) • Command line or use with Grunt or Gulp task runners. • Watches for file changes. • Injects CSS changes rather than full reload. • Syncs scrolling, click events, form input & navigation. • Great for Responsive Web Development.
15. Command line example # Static server using the 'app' directory as the root # and watch for css or html changes # Will open your browser at http://localhost:3000 browser-sync start --server app --files "app/css/*.css, app/*.html" [BS] Local URL: http://localhost:3000 [BS] Serving files from: app [BS] Watching files...
16. Gulp example
17. More features... Using with Gulp or Grunt allows: • SASS compilation & automatically reload. • CSS & Javascript Linting. • Browser prefixing. • Minification & Concatenation. • Production / Development configurations.
18. Alternatives... • Codekit ($32) Mac only • LiveReload ($9.99) Mac & Windows • F5 key (Free :))
19. Questions ? Live demo? (If wireless is working and the demo gods are happy)
20. Thank You