pearls and must-have tools for the modern web / .net developer
DESCRIPTION
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.TRANSCRIPT
Ofer Zelig
@oferzelig
http://fullstack.info
Pearls and Must-Have
Tools for the Modern
Web / .NET Developer
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
RESPONSIVE DESIGN
• 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
• 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
• Is it a new project?
Don’t hesitate – use Bootstrap
• Don’t know what Bootstrap is?
Responsive Design
• 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
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
Templates• Admin interfaces
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
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)
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
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
CLIENT SIDE MVC
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
Client Side MVCAnd 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
Client Side MVC
OK, you convinced me.
Now: which one?
• Ember
• AngularJS
• Backbone
• Knockout
Client Side MVC
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
Client Side MVCAngularJS
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
Client Side MVCAngularJS
• 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
PERFORMANCE
Performance
• Dozens of things you can do
• 99% are really easy to implement – just Google them
• No business justification not to do them
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)
PerformanceJust 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
Performance
Where do I start?
Meet your best friends:
Performance
Chrome: PageSpeed Insights (link)
Performance
WebDevCheclist.com
Site + Chrome Extension
(DEMO)
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
LEGACY BROWSER SUPPORT
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.
Legacy Browser SupportIE 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%
Legacy Browser SupportHow 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
FEATURE SUPPORT
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/
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…
VISUAL STUDIO TOOLING FOR
WEB DEVELOPMENT
VS Tooling for Web Dev
• The one ultimate extension you’ll need:
Web Essentials
• It has soooo much….
• Just a few examples:
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
VS Tooling for Web Dev
• Web Essentials - JavaScript:
• JSHint
• Minification & Bundling
• Intellisense
• Go to definition
• and much more
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
VS Tooling for Web Dev
• Web Essentials - More:
• TypeScript side-by-side preview
• MarkDown editor & compiler to HTML
• robots.txt intellisense
WEB APPS TIPS
Web App TipsTime 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
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.
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.
Web App TipsHTML 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!
Web App TipsDeployment
• 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.
Web App TipsDeployment
• Make a “System Health Check” screen in your back
office
Web App Tips
Platform Dependency
• Try not to hook yourself to one platform (e.g. Azure)
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)
Web App Tips
Browser<->Server Communication
• Scenario
Web App TipsBrowser<->Server Communication
ClientServer
1st option: short polling
Web App TipsBrowser<->Server Communication
ClientServer
2nd option: long polling
Web App TipsBrowser<->Server Communication
ClientServer
3rd option: WebSockets
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)
TESTING
TestingServer side:
• Nunit + Moq
• Selenium – Web browser automation tool
• PhantomJS – Headless WebKit
• Nice uses:
• Detect screen regression
• Web page to PDF
• Automate load speed auditing
• Detect browser features
TestingClient side:
• Jasmine
• QUnit
• Karma Runner
SAAS
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
SAAS
• A/B Testing (or “Split Testing”)
• Optimizely
• Want to do it yourself anyway? FairlyCertain
NETWORK
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
Network
Have my DNS changes propagated around the world?
www.whatsmydns.net
Network
Hackers’ ping / nslookup web interface
digwebinterface.com
• Authoritative / non-authoritative lookups
• Colouring
• Short / Long / Trace
WHAT/WHO TO FOLLOW
IN THE .NET AREA
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.