Journey to JavaScript (from C#)

Developer Advocate for Telerik
Code PaLOUsa Co-Chairman
Author: TDN, Simple-Talk
Podcast: Eat Sleep Code
Twitter: @EdCharbeneau

o
-H.G. Wells “War of the Worlds”

Learn by doing
Work on something challenging
Find a fun project

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

CSHTML
<body> @Html.Ipsum().h1().p() </body>
Rendered HTML
<body>
<h1>Lorem Ipsum</h1>
<p>Erat stet aliquyam vero dolore …</p>
</body>

 Open up Prototyping MVC, a tool written for
C#/MVC, using JavaScript
 Remove the dependency on a backend language &
framework

Prototyping for MVC
 Installed via NuGet
 HTML Helpers
 Razor view engine
 @Html.Ipsum().[api chain]
 Outputs HTML

 Must be easy to install and operate
 Convert HTML Helper to jQuery plugin
 Maintain Razor Syntax
 Learn jQuery and JavaScript
?

Razor
Server side
Assists in building markup
Creates HTML
JavaScript
Client side
Independent of markup
Manipulates HTML

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.
?

 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?

 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?

“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.

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)

C#
public Ipsum p(args…)
{
return this;
}
JavaScript
p: function(args…)
{
return this; //Ipsum
}

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
}
} ()

Because JavaScript is a dynamic language, the jQuery
version of the tool is easily extended and customized.

 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

 My C# development improved
after learning JavaScript.
 Writing code in a different
language changes your
prospective on solving
problems.

 responsivemvc.net/Prototyping
 github.com/EdCharbeneau/InlineIpsum
 goo.gl/ads6UF (Rapid prototyping article)
 goo.gl/ulV6LX (Learn jQuery)

Journey to JavaScript (from C#)

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Journey to JavaScript (from C#)

Ähnlich wie Journey to JavaScript (from C#) (20)

Mehr von Ed Charbeneau

Mehr von Ed Charbeneau (18)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Journey to JavaScript (from C#)

Hinweis der Redaktion