18 ways your brand new asp.net mvc project can - amazon s3
Post on 09-Feb-2022
1 Views
Preview:
TRANSCRIPT
18 Ways Your Brand New ASP.NET MVC Project Can Be Better
by Michael KennedyDevelopMentor
@mkennedyhttp://www.michaelckennedy.net
from DEVELOPMENTOR - ONLINE, COLLABORATIVE, LEARNING PLATFORM.
Warning: US English ahead, sorry my UK friends!
BonusThat's a bonus of 9 Ways!
OId Title:
9 Ways Your Brand New MVC 3 Project Can Be Better
ASP.NET MVC 4 has adopted many of the recommendations from the community.
Learn more at http://story.learninglineapp.com
Let's Start Here
Free for DewWeek attendees: http://bit.ly/ll-kennedy
MVC 4 is a major improvement - a quick reviewHere are some of the recommendations for new MVC 3 projects:
1. Delete the Microsoft MVC scripts (e.g. MicrosoftMvcValidation.js).2. Update your NuGet packages (more on this later).3. Create a separate space for your JavaScript vs NuGet's JavaScript.4. Minify your CSS in production.5. Create a JavaScript intellisense import for common libs, e.g. jQuery.6. Remove unused NuGet and JavaScript packages, e.g. jQueryUI.7. Add a reset.css file to help avoid style differences across browsers.8. Create a ViewModels folder.9. Move script imports to the bottom of layouts (except Modernizr.js).
10. Create a partial view which normalizes JavaScript imports.
from DEVELOPMENTOR - ONLINE, COLLABORATIVE, LEARNING PLATFORM.
MVC 4 is a major improvement - a quick reviewWhat has MVC 4 adopted out of the box? Gray items no longer necessary:
1. Delete the Microsoft MVC scripts (e.g. MicrosoftMvcValidation.js).2. Update your NuGet packages (less out of date).3. Create a separate space for your JavaScript vs NuGet's JavaScript.4. Minify your CSS in production.5. Create a JavaScript intellisense import for common libs, e.g. jQuery.6. Remove unused NuGet and JavaScript packages, e.g. jQueryUI.7. Add a reset.css file to help avoid style differences across browsers.8. Create a ViewModels folder.9. Move script imports to the bottom of layouts (except Modernizr.js).
10. Create a partial view which normalizes JavaScript imports.
Learn more at http://story.learninglineapp.com
MVC 4 is a major improvement - a quick review
Free for DewWeek attendees: http://bit.ly/ll-kennedy
1.
from DEVELOPMENTOR - ONLINE, COLLABORATIVE, LEARNING PLATFORM.
1. Your NuGet packages are already out of date
NuGet is awesome, but...
Learn more at http://story.learninglineapp.com
1. Your NuGet packages are already out of date
Updating each package via the UI is painful. Do it in one shot with a command:
Free for DewWeek attendees: http://bit.ly/ll-kennedy
1. Your NuGet packages are already out of date
But you *might* want to look into jQuery Migrate (also on NuGet)
https://github.com/jquery/jquery-migrate#readme
from DEVELOPMENTOR - ONLINE, COLLABORATIVE, LEARNING PLATFORM.
2.
Learn more at http://story.learninglineapp.com
2. Turn on NuGet package restore
Free for DewWeek attendees: http://bit.ly/ll-kennedy
3.
from DEVELOPMENTOR - ONLINE, COLLABORATIVE, LEARNING PLATFORM.
3. CSS on top, JavaScript on the bottom
JavaScript requests are blocking, let's load the UI first.
But what about
● Inline script?● Optional scripts?
Modernizr.js is special.
Learn more at http://story.learninglineapp.com
4.
Free for DewWeek attendees: http://bit.ly/ll-kennedy
4. Don't commingle your JavaScript with NuGet's
NuGet is awesome, but...
this is already crowded.
Make your own space.
from DEVELOPMENTOR - ONLINE, COLLABORATIVE, LEARNING PLATFORM.
5.
Learn more at http://story.learninglineapp.com
5. Minify your CSS in production
MVC 4 introduces minification as a feature of the framework. Use it.
Free for DewWeek attendees: http://bit.ly/ll-kennedy
6.
from DEVELOPMENTOR - ONLINE, COLLABORATIVE, LEARNING PLATFORM.
6. Add real jQuery intellisense
Before After
http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1-vsdoc.js
Learn more at http://story.learninglineapp.com
7.
Free for DewWeek attendees: http://bit.ly/ll-kennedy
7. Use a reset CSS file
from DEVELOPMENTOR - ONLINE, COLLABORATIVE, LEARNING PLATFORM.
credit: http://www.hyperwrite.com/articles/showarticle.aspx?id=68
Programming on the web is awesome,except when it's not.
Browser inconsistencies are really frustrating. Reset CSS files can help.
7. Use a reset CSS file
Find a reset file at http://www.cssreset.com/
I personally like Normalize.css best.
Learn more at http://story.learninglineapp.com
8.
Free for DewWeek attendees: http://bit.ly/ll-kennedy
Learn more at http://story.learninglineapp.com
8. Create a ViewModels folder
This is a problem!
What goes in this folder? In real apps, you use data access assemblies, not just a folder.
8. Create a ViewModels folder
Now that's something I can work with!
I know what goes in these green boxes.
Learn more at http://story.learninglineapp.com
9.
Free for DewWeek attendees: http://bit.ly/ll-kennedy
Learn more at http://story.learninglineapp.com
9. Define a partial view for all your JavaScript imports.
9. Define a partial view for all your JavaScript imports.
You may want two JavaScript partial views
1. External imports (jquery, jqueryval, knockout, etc)
2. Your app's code (core.js. store.js, etc) that you built.
Learn more at http://story.learninglineapp.com
10.
Free for DewWeek attendees: http://bit.ly/ll-kennedy
Learn more at http://story.learninglineapp.com
10. Import your JavaScript files at the bottom.
You had to invent this in MVC 3.
Now it's just part of MVC.
But you still need to know how to use it.
10. Import your JavaScript files at the bottom.
Does this still work?
(regardless of whether it's a good idea)
Learn more at http://story.learninglineapp.com
11.
Free for DewWeek attendees: http://bit.ly/ll-kennedy
Learn more at http://story.learninglineapp.com
11. Setup web deploy for easy and reliable deploys.
http://www.microsoft.com/web/gallery/install.aspx?appid=WDeploy
12.
Learn more at http://story.learninglineapp.com
12. Change your project's startup page.
What?!? Why must this happen!
Free for DewWeek attendees: http://bit.ly/ll-kennedy
Learn more at http://story.learninglineapp.com
12. Change your project's startup page.
Ah, better!
13.
Learn more at http://story.learninglineapp.com
13. Careful with your vendor prefixes in CSS
Look, CSS3 is awesome!
Wait, why are there three ways to say box sizing?
Free for DewWeek attendees: http://bit.ly/ll-kennedy
Learn more at http://story.learninglineapp.com
13. Careful with your vendor prefixes in CSS
http://leaverou.github.com/prefixfree/
13. Careful with your vendor prefixes in CSS
CSS3 IS awesome!
Learn more at http://story.learninglineapp.com
14.
from DEVELOPMENTOR - ONLINE, COLLABORATIVE, LEARNING PLATFORM.
14. Turn on Resharper's Analyze Errors
Do you see the error? Does Visual Studio?
Free for DewWeek attendees: http://bit.ly/ll-kennedy
14. Turn on Resharper's Analyze Errors
Learn more at http://story.learninglineapp.com
15.
from DEVELOPMENTOR - ONLINE, COLLABORATIVE, LEARNING PLATFORM.
15. Consider a front-end CSS framework
http://usablica.github.com/front-end-frameworks/compare.html
Free for DewWeek attendees: http://bit.ly/ll-kennedy
15. Consider a front-end CSS framework
Learn more at http://story.learninglineapp.com
16.
from DEVELOPMENTOR - ONLINE, COLLABORATIVE, LEARNING PLATFORM.
16. When possible, pre-cache your JavaScript files.
https://learninglineapp.com/account/register?returnUrl=https://learninglineapp.com/schedule
Free for DewWeek attendees: http://bit.ly/ll-kennedy
17.
Learn more at http://story.learninglineapp.com
17. Use JavaScript namespaces.
from DEVELOPMENTOR - ONLINE, COLLABORATIVE, LEARNING PLATFORM.
18.
Free for DewWeek attendees: http://bit.ly/ll-kennedy
18. Catch and avoid multiple JavaScript file loads.
http://blog.michaelckennedy.net/2012/10/11/preventing-javascript-files-from-loading-multiple-times/
Learn more at http://story.learninglineapp.com
Summary 1. Your NuGet packages are already out of date - update them.
2. Turn on NuGet package restore.
3. CSS on top, JavaScript on the bottom.
4. Don't commingle your JavaScript with NuGet's.
5. Minify your CSS in production.
6. Add real jQuery intellisense.
7. Use a reset CSS file.
8. Create a ViewModels folder.
9. Define a partial view for all your JavaScript imports.
from DEVELOPMENTOR - ONLINE, COLLABORATIVE, LEARNING PLATFORM.
Summary (cont.)10. Import your JavaScript files at the bottom of the page.
11. Setup web deploy for easy and reliable deploys.
12. Change your project's startup page.
13. Careful with your vendor prefixes in CSS.
14. Turn on Resharper's Analyze Errors.
15. Consider a front-end CSS framework.
16. When possible, pre-cache your JavaScript files.
17. Use JavaScript namespaces.
18. Catch and avoid multiple JavaScript file loads.
Free for DewWeek attendees: http://bit.ly/ll-kennedy
Thanks for coming!
Free for DewWeek attendees: http://bit.ly/ll-kennedy
STAY IN TOUCH
Blog: blog.michaelckennedy.net
Twitter: @mkennedy
Google+: http://bit.ly/kennedy-plus
top related