18 Ways Your Brand New ASP.NET MVC Project Can - Amazon S3

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!

http://twitter.com/mkennedy


http://www.michaelckennedy.net

http://www.michaelckennedy.net

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.


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.


MVC 4 is a major improvement - a quick review


1.


1. Your NuGet packages are already out of date

NuGet is awesome, but...



Updating each package via the UI is painful. Do it in one shot with a command:



But you *might* want to look into jQuery Migrate (also on NuGet)

https://github.com/jquery/jquery-migrate#readme




2.


2. Turn on NuGet package restore


3.


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.


4.


4. Don't commingle your JavaScript with NuGet's

NuGet is awesome, but...

this is already crowded.

Make your own space.


5.


5. Minify your CSS in production

MVC 4 introduces minification as a feature of the framework. Use it.


6.


6. Add real jQuery intellisense

Before After

http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1-vsdoc.js




7.


7. Use a reset CSS file


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.

http://www.hyperwrite.com/articles/showarticle.aspx?id=68

7. Use a reset CSS file

Find a reset file at http://www.cssreset.com/

I personally like Normalize.css best.


http://www.cssreset.com/



8.



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.


9.



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.


10.



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)


11.



11. Setup web deploy for easy and reliable deploys.

http://www.microsoft.com/web/gallery/install.aspx?appid=WDeploy



12.


12. Change your project's startup page.

What?!? Why must this happen!




Ah, better!

13.


13. Careful with your vendor prefixes in CSS

Look, CSS3 is awesome!

Wait, why are there three ways to say box sizing?




http://leaverou.github.com/prefixfree/




CSS3 IS awesome!


14.


14. Turn on Resharper's Analyze Errors

Do you see the error? Does Visual Studio?


14. Turn on Resharper's Analyze Errors


15.


15. Consider a front-end CSS framework

http://usablica.github.com/front-end-frameworks/compare.html





15. Consider a front-end CSS framework


16.


16. When possible, pre-cache your JavaScript files.

https://learninglineapp.com/account/register?returnUrl=https://learninglineapp.com/schedule





17.


17. Use JavaScript namespaces.


18.


18. Catch and avoid multiple JavaScript file loads.

http://blog.michaelckennedy.net/2012/10/11/preventing-javascript-files-from-loading-multiple-times/




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.



Summary (cont.)10. Import your JavaScript files at the bottom of the page.

11. Setup web deploy for easy and reliable deploys.


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.


Thanks for coming!


STAY IN TOUCH

Blog: blog.michaelckennedy.net

Twitter: @mkennedy

Google+: http://bit.ly/kennedy-plus

http://blog.michaelckennedy.net


http://bit.ly/kennedy-plus

Date post:	09-Feb-2022
Category:	Documents
Upload:	others
View:	1 times
Download:	0 times

18 Ways Your Brand New ASP.NET MVC Project Can - Amazon S3

Documents