Journey to JavaScript (from C#)
0 likes653 views
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.
![Prototyping for MVC
Installed via NuGet
HTML Helpers
Razor view engine
@Html.Ipsum().[api chain]
Outputs HTML](https://image.slidesharecdn.com/journeytojavascript-140619121924-phpapp02/85/Journey-to-JavaScript-from-C-10-320.jpg)
More Related Content
What's hot (20)
Viewers also liked (20)
Similar to Journey to JavaScript (from C#) (20)
![Full Stack React Workshop [CSSC x GDSC]](https://cdn.slidesharecdn.com/ss_thumbnails/fullstackreactworkshopcsscxgdsc-230221003415-b512c1cf-thumbnail.jpg?width=560&fit=bounds)
More from Ed Charbeneau (18)
Recently uploaded (20)
Journey to JavaScript (from C#)
- 2. Developer Advocate for Telerik Code PaLOUsa Co-Chairman Author: TDN, Simple-Talk Podcast: Eat Sleep Code Twitter: @EdCharbeneau
- 3. o -H.G. Wells “War of the Worlds”
- 5. Learn by doing Work on something challenging Find a fun project
- 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
- 8. CSHTML <body> @Html.Ipsum().h1().p() </body> Rendered HTML <body> <h1>Lorem Ipsum</h1> <p>Erat stet aliquyam vero dolore …</p> </body>
- 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. ?
- 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)
- 19. C# public Ipsum p(args…) { return this; } JavaScript p: function(args…) { return this; //Ipsum }
- 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.
- 26. Go Explore
- 27. responsivemvc.net/Prototyping github.com/EdCharbeneau/InlineIpsum goo.gl/ads6UF (Rapid prototyping article) goo.gl/ulV6LX (Learn jQuery)
Editor's Notes
- #2: About me / What I do Complacency
- #9: Break for examples How it works Why it’s needed
- #17: jquery.ba-replacetext.js
- #18: First “grass is greener” moment
- #19: Second “grass is greener” moment
- #20: Fluent API design is almost identical Create a function that returns a method chain. In this case, whole Ipsum object.
- #21: 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/