Join me on a journey through problem solving. In this talk we'll discuss the challenges of porting a C# based tool to a JavaScript / jQuery plugin. We'll look at why it can be beneficial to rewrite code using a different language and learn that sometimes implementation can be easier than what we theorize.
7. A fluent API that creates Lorem Ipsum text and
placeholder images at runtime using simple helper
extension methods. Prototyping for MVC is
specifically for reducing prototyping markup. Since
lorem ipsum is injected at runtime, your markup
remains untouched and your source code remains
clean.
www.responsivemvc.net/Prototyping
9. Open up Prototyping MVC, a tool written for
C#/MVC, using JavaScript
Remove the dependency on a backend language &
framework
10. Prototyping for MVC
Installed via NuGet
HTML Helpers
Razor view engine
@Html.Ipsum().[api chain]
Outputs HTML
11. Must be easy to install and operate
Convert HTML Helper to jQuery plugin
Maintain Razor Syntax
Learn jQuery and JavaScript
?
12. Razor
Server side
Assists in building markup
Creates HTML
JavaScript
Client side
Independent of markup
Manipulates HTML
13. JavaScript is good at finding elements on a page.
Things like images, paragraphs, user interface
components. JavaScript is not good at finding
specific text on a page.
?
14.
15. Can I find text on a page and replace it?
Can I execute dynamically created
JavaScript code from within my code?
Can I do a combination of the above?
Can I find dynamically created JavaScript on a page, execute it and
replace the found text with the results of the dynamically created
JavaScript?
16. Can I find text on a page and replace it?
Yes! replaceText(regex, callback)
Can I execute dynamically created
JavaScript code from within my code?
Yes! eval(string)
Can I do a combination of the above?
Yes! replaceText(regex, eval(textFound))
Can I find dynamically created JavaScript on a page, execute it and replace the
found test with the results of the dynamically created JavaScript?
17. “I was a battleground of fear and
curiosity.”
-H.G. Wells “War of the Worlds”
After a month of putting off
the project, a working version
only took one day to complete.
18. C#
TagBuilder element = new TagBuilder(tag);
element.MergeAttributes(attributes);
element.innerHtml = “Lorem Ipsum”;
element.ToString();
Note:
Because C# is statically typed, we need help making this task
easy. Dynamic Reflection
HtmlHelper.AnonymousObjectToHtmlAttributes(object)
//returns a Key Value pair of HTML attributes
jQuery
attributes = $.extend({}, { text: text }, attributes);
$(tag, attributes)
20. C#
public class Module {
private object SomeFunction() { … }
private object PrivateFunction() { … }
public object PublicFunction() {
return SomeFunction()
}
}
JavaScript
var module = function () {
//private
var someFunction = function(message){ ... },
privateFunction = function() { ... };
return {
//public
publicFunction: someFunction
}
} ()
21. Because JavaScript is a dynamic language, the jQuery
version of the tool is easily extended and customized.
22. Don’t focus on solving the problems exactly the
same way they were solved before.
Embrace the environment, don’t try to force
concepts from another language
23. My C# development improved
after learning JavaScript.
Writing code in a different
language changes your
prospective on solving
problems.
Fluent API design is almost identical
Create a function that returns a method chain. In this case, whole Ipsum object.
Accessibility levels in C# are part of the language and easily understood. Closures in JavaScript take more planning and discipline. Not all developers write closures the same way. http://addyosmani.com/resources/essentialjsdesignpatterns/book/