Codezoners

Aminur Rahman

Placement: Euromonitor

Project 1

Grinder Extraction Cleanup

C#

• Code First
• Logging
• Unit Testing

Project 2

• A web application to serve as an admin tool.
• User management for other applications
• Control access permissions

Technologies

HTML, CSS

ASP.NET MVC 5

AngularJS, Web API

Evolution

• Hand code
• Helpers
• View Models
• Bootstrap
• Angular

DEMO

Takeaways (see what I did there?)

• Don't expect perfect design to be handed over to you
• You might be building on something that is fragile or not destined to last
• You might be scratching your head a lot if you don't fill in the gaps in your knowledge

Package Manager - NuGet

Much easier to upgrade a library in use

Moving to Angular + Web API

JSON format for Web API

Additionally custom events can be triggered on a per slide basis by binding to the data-state name.

public static class WebApiConfig
    {
        public static void Register(HttpConfiguration config)
        {
            config.Formatters.Clear();
            config.Formatters.Add(new JsonMediaTypeFormatter());
            config.MapHttpAttributeRoutes();
            config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{id}",
                defaults: new { id = RouteParameter.Optional }
            );
        }
    }

What next?

Bring it all together

(ns hiccup-templating.views.layout
  (:use [hiccup.page :only (html5 include-css include-js)]))
(defn application [title & content]
  (html5 {:ng-app "myApp" :lang "en"}
         [:head
          [:title title]
          (include-css "//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css")
          (include-js "http://code.angularjs.org/1.2.3/angular.min.js")
          (include-js "js/ui-bootstrap-tpls-0.7.0.min.js")
          (include-js "js/script.js")
          [:body
           [:div {:class "container"} content ]]]))

(defn hello []
  [:div {:class "well"}
   [:h1 {:class "text-info"} "Hello Hiccup and AngularJS"]
   [:div {:class "row"}
    [:div {:class "col-lg-2"}
     (label "name" "Name:")]
    [:div {:class "col-lg-4"}
     (text-field {:class "form-control" :ng-model "yourName" :placeholder "Enter a name here"} "your-name")]]
   [:hr]
   [:h1 {:class "text-success"} "Hello {{yourName}}!"]])

App for Education

Processing + minim library

iProcessing is an integration with Processing.js and a JScript framework for iPhone

THE END OF THE BEGINNING

Aminur Rahman