Templating engine that is also able to output entire final code as HTML

Hi there,

I am doing some front-end work here and will need to hand over 40 pages. Many pages have repetitive elements which I don’t want to copy by hand. It would be the best of course if I could simply use some server-side language such as PHP and use ‘include’ statements to achieve the desired result, and give the back-end people PHP files but the problem is that I’m not familiar with the server-side language that will be used in production and I don’t even want to learn, it’s C# for those who are curious.

I was wondering whether there is a way to develop ones site in PHP, or other server-side language which is not C#, or perhaps use some kind of Javascript templating engine, and then in development mode use that but the production code will be outputted as HTML.

Not sure how common is this problem, probably not that common but I imagine I am not the first one who thought this would make a nifty plugin, especially for something like Grunt.

Maybe something like Jekyll would be a good fit? Runs on Ruby locally, but outputs simple HTML

In my experience you shouldn’t need to manipulate data by hand.

People are paying you to develop the HTML and CSS for those elements.
If it’s a dynamic site then they’ll just be deleting all but the first of those items anyway, don’t spend time on it.

Looking for a server-side solution won’t help you because that effort will be wasted, just hand people examples of the pages with the elements that need repeating.

@ralphm Than’s it looks really pretty cool, will play around.

@markbrown4 that’s an interesting point of view, never thought about it this way. However, in my case, once back-end is put in place, the site will stay more or less the same as it was coded by me, each page is quite unique. But for those parts that are repetitive I would still like to be able to have them in one file and hand over to back-end developer full HTML with the headers and all. I understand your point that there is no need of doing that but I would say it’s still a good thing to do as it will save time for back-ender trying to make sense of where all the elements should be, or what header style is used in that page.

So let me get this straight. You have been hired as a front-end developer to take designs which you have created and convert them to CSS and HTML to integration into some kind of .NET ecosystem? I wouldn’t worry about anything because that is going to be a mess either way. Typically you would have a designer who creates the mock-ups than a person who integrates the mock-ups into .NET doing all the CSS and HTML stuff along with it. It is unlikely much of what you supply will ever get actually used for the end result besides for the design of the site itself. I’ve dealt with designers such as yourself I always tell them it is just easier for me to create the HTML and CSS myself unless they are going to take ownership over the entire front-end including integration into the server-side code.

@oddz, your opinion is very strong and you have made many assumptions which are not necessarily correct so while I appreciate your input, it would also be nice if you were not projecting onto me as much.

I am not a designer, where did you get that? I am making front-end solution and not the design. Designer has made the designs, then I, with collaboration with the designer am producing front-end solution. This means that we make the site responsive and fully optimized for a range of devices. Then the output of what was produced is sent to back-end person who adds a layer on top of the system so that the client can manage parts of the content.

You may not like this division of labour but it’s rare to find people who can do all things well and in larger, more complicated projects it works best if project is done in a team where each one is superb at his craft. Unless of course you know someone who can do everything well which after certain skill level is incredibly rare.

I have worked this way in the past and produced brilliant results with our team. My question here does not deal with our development process though, please don’t go off-topic. What I asked however is whether there is a way to insert snippets into code and later simply run some Grunt task or whatever and produce all the pages as a HTML output and remove the snippets. Basically, in development mode have all the snippets, such as header being its own file, and in production mode you would no longer have header file but have all pages in their final form.

I’m confused about the question. Is the site built in ASP.Net MVC? What’s wrong with using Razor and Master Pages?

I don’t know what is neither Razor nor Master Pages, back-end decisions are not up to me but the final site will be done in Umbraco.

Razor is the templating engine for ASP.NET MVC3+. It’s the View Logic and made to be handled by the Frontend Developer. It takes about 20minutes to learn.

This screenshot from Umbraco is in Razor:

http://umbraco.com/media/280743/fav-editorlarge.png

You probably need to use this, but I’m not familiar with Umbraco. I don’t think have any other options if this is what they expect you to tie in to. How are you getting the data from the backend? Is it all Ajax? You could possibly use a JS MV* Framework like Angular or Backbone to do it. But given that Umbraco is an Enterprise solution you probably need to support IE8 or maybe even lower, which means you’re back to Razor.

Master Pages remove the whole including of the headers you were talking about earlier. You write 1 master page and include your view pages into that. You can see that in the above screenshot by the @RenderBody() command, the screenshot is of the Master Page.

1 Like

Thanks @mawburn , this is indeed quite helpful. I will talk to the back-ender and we might figure something out to make life easier for both of us. The browser support is IE9+, Android 4.0+, you get the idea, not so bad, don’t have to deal with super legacy browsers.

Elements that include AJAX requests is tricky and most annoying part of development. First I produce most of what can be done without back-end. Later the back-ender adds Umbraco and prepares AJAX requests. After that point, the website is on some development server on which I work on from that point. If possible, it would be awesome to simplify that part of development as it’s indeed quite cumbersome.

1 Like

That type of division of labor more often than not results in severe inefficiencies. I truly believe that as a front-end developer it is you’re responsibility to take complete control over the front-end. That includes integration into whatever CMS or framework is in place. If you aren’t doing that than just a designer. More often than not there are limitations and patterns on the server-side software that make it impossible or highly inefficient to consider the HTML and CSS completely out-side of the software which it must be integrated into at the end. I haven;t worked any with .NET but I know this is for certain when it comes to most content management systems and several frameworks. To the point of where the HTML and CSS considered outside of the end software must be completely rewritten anyway but the people who create think they are doing others a favor – which they are not – just a perception of one to those who know nothing. Though that is a separate topic really. So my advice would be stop lolly-gagging around learning it and with the assistance of the person you’re working with set-up a local environment and do things right – direct integration into .NET. That is if that is something that would be allowed. Otherwise I would have to say that your clients/bosses mentality is a flawed one.

1 Like

@oddz that’s just insulting. If someone is implementing front-end only, that does not make him a designer. I don’t know what scenarios you dealt with in the past but all of the code that I produce suits back-end people really well and never ever had it to be rewritten. I admit that in the past front-end was not so hard, when you could get by with HTML/CSS/jQuery only but in today’s world to be a proper front-end developer you first must become a software engineer, not sure how that fits into the role of designer. If you think through things well from the start, that avoids the issues you were talking about. By your logic it sounds like someone working at Facebook for example should be able to do back-end and front-end, and do both of these things really well? Clearly not.

I wouldn’t say the front-end developer needs to be full fledged back-end developer. What I’m saying is they should know enough of the application language and/or framework to take control of integrating the design into the application. I mean just about all front-end developer roles I’ve come across require this type of understanding since most people know how much of a cluster it is have someone create HTML and CSS than another attelpt to untangle that into whatever back-end system is in use.

Provided that the back end is keeping the function and appearance separate then the front end developer should just need to know the templating model used on the back end that is used to define the appearance of the pages as that is what they would actually be coding. If the function and appearance are not separated then you can’t have a front end and a backend developer as the code they would need to develop would be all jumbled together.

2 Likes

Very true I would like to think newer software is being created in this way. Like I said I’m not very familiar with .NET but I’m fairly certain sure .NET and ASP have complete separation between the presentation and logic layer using templates. So what I’m saying is the front-end developer should be capable of setting up the environment and working directly in those templates. Also knowing the right questions to ask when something is beyond their understanding when it comes to more back-end based stuff that they may encounter working in templates.

1 Like

Classic ASP doesn’t inherently separate logic and presentation. It’s very much like PHP in that respect. From what I understand, ASP.NET is designed to separate concerns more cleanly.

Yes, it uses a different templating markup language than just C# or VB called Razor. It can function somewhat similar it’s just not made to, it will also work the same with a VB backend if your devs got stuck in the 90’s but for some reason wanted to upgrade to MVC3+

I love Razor. The Play Framework’s templating engine (Twirl) is heavily inspired by Razor but is based on Scala instead of C# and it is the major reason why I fell in love with the framework. The entire framework borrows a lot from ASP.Net MVC, which was my first introduction to the paradigm and it kind of spoiled me… after leaving it my biggest shock was how few frameworks use the Layout/Master Pages concept.

Thanks guys for your input. I now see clearly that what in the end I was trying to achieve is patch the problem in our development process. It would be only a patch though and not a proper fix. So yes, I shall talk to back-end people more and come up with something between us.

I still think this idea of templating engine I suggested is pretty nifty but perhaps not so much needed :slight_smile: