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#)

More Related Content

What's hot

Viewers also liked

Similar to Journey to JavaScript (from C#)

More from Ed Charbeneau

Recently uploaded

Journey to JavaScript (from C#)

Editor's Notes