We are all flooded with information: blogs, videos, millions of open source projects. In this presentation I share my insights: what are the must-know and must-have tools, frameworks and techniques you can use today (or at least know about) in order to be up-to-date.
2. Quick Housekeeping
• It’s just a sample - don’t expect to see everything
• It’s just MY opinion
• Aimed for .NET developers, but many things are
cross platform
• Quick, condensed, presentation will be uploaded
• Those of you who read it in 2015+, please consider
the fact it’s written in 6/2014
4. • Two approaches:
• Start wide and change flow as you get narrow
• Start narrow and change flow as you get wide
• Bootstrap 3+ : Mobile friendly (start narrow)
• More about Bootstrap later
Responsive Design
5. • Don’t know how to start? It’s very easy
@media (min-width: 768px) { /* your CSS rules */ }
• There’s a good boilerplate code for all common
resolutions
• A very few gotchas:
• Handling images (proportions etc.)
• Collapsible menus require a bit of JS
• As always, you need to test multiple browsers/platforms
Responsive Design
6. • Is it a new project?
Don’t hesitate – use Bootstrap
• Don’t know what Bootstrap is?
Responsive Design
7.
8. • Now seriously. Bootstrap is:
• Premade CSS rules for full responsive design, starting
from mobile and growing to large desktops
• Styles for forms, controls & states, warning/info
messages, images & thumbnails, menus, progress bars
and a lot more
• Scripts for common functionality: modal dialogs,
button behavior, drop downs & menu effects, tooltips,
carousels…
• Bullet-proof CSS functionality (centering, clearfix,
container pulling, accessibility substitutions…
• Cross browser (IE8+) and cross platform
Responsive Design
9. A shiny new site - where do I begin?
• You don’t reinvent the wheel
• Bootstrap or one of hundreds Bootstrap-based
templates
• Just make sure it’s 3.2+ or you’ll regret later
• Templates today are not what they used to be
• Good links in the slideshow notes
Templates
11. Templates
• Admin interfaces
• Dozens of admin templates to choose from
• Based on Bootstrap and contain lots of features that
either:
• Will consume lots of your time, instead of focusing on
code to deliver to the admin interface
• You’ll skip them because of lack of time or just won’t
think about them
• Just to name a few: login, action items, menu,
dashboard with KPIs, robust tables, many inner sample
pages, graphs…
• DEMO
12. Templates
• You’ll also likely to learn a lot from these templates
• I learned:
• Client-side graph libraries
• Nice overlay techniques
• Handy CSS techniques
• Useful plugins (‘loading’ behaviours, responsive images,
parallax effects and much more)
• Font substitution for common images (fontawesome.io)
13. More on responsive design
• The quickest, easiest & most charming way to see
how your site looks like in different resolutions:
Viewport Resizer
• More tools in the slideshow notes
14. More on responsive design
• Device emulators
• http://www.browserstack.com/ - see your site in
dozens of real devices, run automated tests (Selenium)
against them
• Less devices (9), but the most common ones and free -
https://modern.ie/en-us/screenshots
16. Client Side MVC
Why?
• It makes your client (web pages) really smart & rich
• Server just serves main page template and control
templates (i.e. pure HTML+CSS)
• You just serve your data as Json, and the client does the
rest: binds it to the right HTML, detects changes in both
the HTML and the model, handling calls to the server…
• Great for SPA, but not exclusively
17. Client Side MVC
And what do all these things good for?
• Your site (app) runs much faster because logic is on the
client and it only goes to the server to fetch data, not to
get HTML artifacts (once initially loaded)
• You truly separate your structure (HTML+CSS) from your
data
• Your server focuses on what it’s good at: serving &
updating data
18. Client Side MVC
OK, you convinced me.
Now: which one?
• Ember
• AngularJS
• Backbone
• Knockout
20. Client Side MVC
AngularJS
Why? Because.
• Its 2-way binding is the best
• It’s maintained by Google
• It’s designed for testing right from the beginning
• It has loads of modules, plugins & directives
• Read more about its awesomeness here
21. Client Side MVC
AngularJS
Where do I start?
• Dan Whalin’s famous
AngularJS Fundamentals In 60-ish Minutes video
(BTW it’s specifically based on Visual Studio)
• or its complementary PDF
• The AngularJS site has a great step-by-step tutorial on
how to build a full app
22. Client Side MVC
AngularJS
• Recommended books: Mastering Web Application
Development with AngularJS, ng-book
• 17 PluralSight courses, the two I’ve seen and liked are:
• AngularJS Fundamentals
• AngularJS for .NET Developers
• Last one: 10 Angular Tips by John Papa
24. Performance
• Dozens of things you can do
• 99% are really easy to implement – just Google them
• No business justification not to do them
25. Performance
Just a few samples:
• Static content compression (GZIP)
• Remove redundant host headers (also good for
security)
• Server, X-Powered-By, X-AspNetMvc-Version, X-AspNet-
Version
• Minify CSS+JS
• Compress images (lossless)
26. Performance
Just a few samples:
• Make image sprites
• Use a CDN, at least for common libraries
• Put your scripts at the bottom of the page
• Embed small images as Base-64 inside your CSS
• Enable proper caching, both for dynamic and static
content
31. Performance
Visual Studio:
Web Essentials Extension
• Minifying JS+CSS, lossless image shrinking, right click
image-to-base64, image sprites, bundling…
• Lots more beyond performance but we’ll get to that
33. Legacy Browser Support
IE8 ?
• If you don’t genuinely have to, DON’T BOTHER.
• Don’t use polyfills, don’t try to tweak HTML+CSS,
don’t detect features with Modernizr – nothing
• Just put a generic “You’ve got an old browser” page
• Bonus: if you want to see why I hate IE8 so much go
read my blog post.
34. Legacy Browser Support
IE 9 + IE 10?
These are June 2014 browser stats (gs.statcounter.com):
Browser Percentage
Chrome (all) 45.36%
Firefox 5+ 17.66%
IE 11 8.67%
Safari iPad 5.77%
IE 8 5.43%
IE 10 3.22%
IE 9 3.22%
35. Legacy Browser Support
How to test IE versions side by side?
https://modern.ie/en-us/virtualization-tools
Free Virtual Machines for Windows, Mac & Linux, with preinstalled Windows OSs:
XP + IE6 Win7 + IE10
XP + IE8 Win7 + IE11
Vista + IE7 Win8 + IE10
Win7 + IE8 Win8.1 + IE11
Win7 + IE9
37. Feature Support
• Not sure if a feature you want to use is supported
across browsers?
• Modernizr
• http://caniuse.com/
• Feature support per browser per version
• http://html5please.com/
• Also includes filtering/instructions whether you need
polyfills, can fallback, support on mobile devices & more
• http://status.modern.ie/
38. All Things Client Side
• https://github.com/dypsilon/frontend-dev-bookmarks
• Everything you want for the client side, continuously
updated
• JS architecture guides, build tools, bootstraps &
boilerplates, image shrinkers, unused code cleanup
tools, weekly newsletters, JS frameworks, jQuery
learning / plugin authoring material, grid design
helpers, cross-platform, email design & boilerplates,
mobile platforms, typography, widgets, memory
analysis tools, video players…
40. VS Tooling for Web Dev
• The one ultimate extension you’ll need:
Web Essentials
• It has soooo much….
• Just a few examples:
41. VS Tooling for Web Dev
• Web Essentials - CSS:
• Intellisense: fixes errors, allows you to add vendor-specific
prefixes, font-faces, style names etc., Image URL picker
• Finds unused/redundant rules, browser support cues, font
previews, in-place color editor
• Minification & Bundling
• Conversions: RGB to HEX to color name, embed image as
Base64 string, LESS compilation
42. VS Tooling for Web Dev
• Web Essentials - JavaScript:
• JSHint
• Minification & Bundling
• Intellisense
• Go to definition
• and much more
43. VS Tooling for Web Dev
• Web Essentials - HTML:
• Image preview
• Minification
• Lorem Pixel & image placeholder generator
• Regions
• Go to definition (of CSS)
• Intellisense for most HTML tags
• Extract embedded JS/CSS to file
44. VS Tooling for Web Dev
• Web Essentials - More:
• TypeScript side-by-side preview
• MarkDown editor & compiler to HTML
• robots.txt intellisense
46. Web App Tips
Time Zones
• Users perform actions on my web app.
What time should I save in the database? server time?
US time? client’s time?
NONE
• All dates & times as UTC on the code / database side
• You view these dates on each client according to that
client’s time zone
• When saving – vice versa
47. Web App Tips
Time Zones
• But it’s awkward to look at UTC times translate to my
local time all the time
Just think global. Your app doesn’t live in your home
country. It’s out there for global reach. Your local time is
meaningless.
That is, unless you’re in your home country, all of your
potential users are from the same country, your country
has only 1 time zone and you don’t have any thoughts of
expanding globally.
48. Web App Tips
HTML (template) vs Data
• Unless SEO is relevant, strive to send pure templates to
the client, and fetch all data in subsequent Ajax calls
• You can send initial data to the client together with the
page, as a JS variable
• AngularJS is perfect for that, but you don’t have to.
49. Web App Tips
HTML vs Data – SEO oriented sites
• Google has a spec to crawling sites that change state
in Ajax (like what AngularJS does…)
• Basically you detect that it’s a crawler and you serve a
statically rendered page
• Completely legit!
• https://prerender.io/ allows you to do that without
much of the manual plumbing (costs $ but you can
host it yourself for free)
• As of May 2014 Google’s crawler runs your JavaScript!
50. Web App Tips
Deployment
• Do yourself a big favor and automate your deployment:
• Build (including minifying, bundling, config transformations,
post cleanups…)
• Test
• Deploy
• You should ultimately be able to do all these with one click.
• There are good tools for that (like Octopus Deploy)
• You can’t because it’s time consuming?
• Your app failures due to a manual error in your deploy
process will consume more time, and will hurt more.
53. Web App Tips
Platform Dependency
• Try not to hook yourself to one platform (e.g. Azure)
54. Web App Tips
ASP.NET Performance
• Dynamic/static caching of course
• Redis of course
• Async methods everywhere
• (at least in every place that goes to the database or I/O)
59. Web App Tips
Browser<->Server Communication
• SingalR
• Takes care of everything, makes it transparent, falls
back to Ajax when WebSockets are not available (IE8,
IE9, old iOS, Android < 4.4)
64. SAAS
• First of all – go see Sam Kroonenburg and Peter
Sbarski’s legendary “Appfail – Story of a Melbourne
.NET Startup” (here it is).
• It will open your mind to the services you can achieve
for very cheap
65. SAAS
• A/B Testing (or “Split Testing”)
• Optimizely
• Want to do it yourself anyway? FairlyCertain
67. Network
• Share multiple sites from your dev machine to your
peers
• hosts file? That’s old…
• http://xip.io/
• 10.0.0.1.xip.io resolves to 10.0.0.1
• mysite.10.0.0.1.xip.io resolves to 10.0.0.1
• etc
72. What/Who to Follow
• Scott Hanselman – blog & podcast
• Scott Guthrie – used to be very relevant, today it’s all
about Azure
• The Morning Brew
• Dot Net Rocks podcast
• All .NET / ASP.NET / Entity Framework team blogs
• The list can of course be much longer, I think these are
the most important for .NET devs.
Editor's Notes
http://getbootstrap.com/
http://getbootstrap.com/
- http://themeforest.net/ - costs money but really worth gold, my favourite
- https://wrapbootstrap.com/ - costs money and great as well
- http://startbootstrap.com/ - some free (and nice!) and some cost money
- Just google “free bootstrap themes” and get tones
Just an example: http://themeforest.net/search?utf8=%E2%9C%93&term=admin
http://screensiz.es/ - shows all physical dimensions and pixel dimensions of all devices
http://quirktools.com/screenfly/