I am building a website using the below stack. For this question, I think the software stack should not matter. I am more interested to know whether the way I am doing the project seems like a good idea or following the best practice.
- Twitter Bootstrap for the UI
- CherryPy
- jQuery
So the way I approached the project is like the below
- Use the Twitter Bootstrap to create the basic layout
- I have one js file and one css file for my project
- Based upon the requirement, let say for this button I need to do something like ajax call
- go to the js file and write like $("#id").click() and do the necessary stuff
- write the necessary action code in python
- Test
So basically, what I am doing, modifying the html file, adding the necessary code that I need in my single js file and do the python code. Seeing all this java script framework like backbone.js, require.js makes me feel that maybe I am not following the best way to do it.
In a sense, what I want to know is that assuming you have a website with few pages that does not have heavy user interaction how would you do it? Is there anything wrong the way I am approaching it? What would be best way to do it?
Thanks
Client side frameworks like Backbone, Angular, and Ember are built to help bring structure to heavy javascript applications. Don't get confused between a client side language like javascript (although now it can be used as a server side language to) and a server side language like C#, Python Php etc.
Most Single Page Applications consume a REST API. So all your functionality will be on the client side. Your server's primary responsibility is to push data to your client so the user can interact with it. Think of your client (written in js) and server(written in python) as two completely separate entities/apps.
If your application is not javascript heavy, I would not go with a Single Page Application and use your current listed tech stack. I would always recommend keeping your javascript structured, but you dont need a framework for this. Just follow one of the js patterns you feel most comfortable which can be listed here.
Related
We have a large ecosystem of Javascript websites, actually Angular, that we don't plan to rewrite in c# any time soon. So the goal here is to be able to use a vendor dll in our javascript to add new features. This is a proprietary system, we don't have any alternative, either we use their dll, either we don't have the feature. I'm putting a lot of hope in webassembly here because this looked like the silver bullet to use that dll without having to rewrite the whole project in a new language.
Problem: all the examples I can find are more about using Blazor to write a website or call javascript from Blazor, I can't find anything to include some ad-hoc C# code into an existing project. I would have thought it would be a great use case though because being able to leverage C# threadpool on a webpage sounds pretty good to me!
Anyone has done something similar or know some examples/tutorials I could follow?
As Tuan says Angular and C# don't really live together in the way you suggest.
I would say there are 2 separate approaches here.
Have an C#.NET MVC app but adjust the routing so the Angular App Handles some pages and the .NET app handles others. This is OK but there are so many pitfalls such as the fact that you can not share bundled CSS and JS or maintain the structure of your Angular controllers (amongst others).
A better way would be keep your lovely Angular app the way it is but have a separate Web API application/project and use the angular app to call the dll (reference in the project) within the correct context as a REST API (via a simple POST or GET call).
It's not too clear exactly what you want to do when you say "... able to use a vendor dll in our javascript to add new features ..." but you can find info on writing and implementing C# as a Web API in .NET core here
https://learn.microsoft.com/en-us/aspnet/core/tutorials/first-web-api?view=aspnetcore-3.1&tabs=visual-studio
I'm an android developer and about two years and recently I've been thinking about building web applications. So I started researching about spring boot and everything is great. Then, I came across this thing called template engines (thymeleaf) which by definition separate your code from presentation.
What is confusing me is how can a backend server have html? should the presentation be handled by html, css and javascript in the front end? I even saw tutorials where they actually type in html code in their controller as return values.
My understanding is that the backend server exposes APIs for the frontend to use by using AJAX and the frontend will manipulate this data and present the information on the screen, why would a backend provide html code?
THank you
the frontend will manipulate this data
What front end? You mean the JavaScript code in the HTML page? Where did that come from? Oh yeah, the server.
It is the server that serves the HTML pages to the client, as well as any .js and .css files.
The server could provide static pages, and anything dynamic is handled by JavaScript. Or, the server could dynamically build the HTML page, using ... you guessed it ... a template engine.
You generally don't want JavaScript to build the page initially, just to use JavaScript for handling any dynamic behavior. Some pages don't even need any dynamic behavior.
Unless of course you're thinking about single-page applications (SPA), where there is only one root HTML page, and everything else is built client-side with JavaScript and AJAX calls, but most web applications are not SPAs.
Thymeleaf replaces JSP by providing HTML pages using a template engine. The controller requests the HTML file and Spring Boot provides that template after building it using the Model provided.
Thymeleaf is great because it allows you to rebuild templates on the fly. Lets say for example you're showing a users points to them on the front end, but maybe the points increase or decrease.
What you can do is build the template in the background using a Model. The Model reference is magically provided to the template provided which parses it.
#RequestMapping(...)
public String request(Model model) {
model.put("points", 5);
return "my-template.html"
}
Then use the Thymeleaf language to provide your object to the HTML file to be processed in the engine during runtime.
<html..>
<head>...</head>
<body>
<h1 th:text="${points}"></h1>
</html>
Spring Boots Template engine will build this in the background and present it to the user, but it will show the actual points to the end user! Hope this helps a tiny bit.
I know this question has been answered pretty effectively so far, but I want to add my two cents in as I work with Thymeleaf often.
The easiest way to think about a template engine is that it allows some dynamic development of html based on information passed to it by the controller method. This allows you to put logic in that normally wouldn't exist, or say display a certain section if a user is perhaps logged into admin.
If web pages were houses, html is the frame, css is the walls, Javascript is the lights and electricity, and a template engine would pretty much just be the architect designing the plans on the fly before the frame was built based on desires of the buyer of the house (user inputs).
OK, newer Apps and websites may just load/boot/open once and then pull or push data via AJAX requests, this is good, it saves traffic and it is fast.
But it has not always been like this and some Frameworks still don't build everything on small requests. Spring in Java or Symfony in PHP are MVC Frameworks and use template engines to build pages. This may sound a little outdated but there is still a lot of websites using this.
And if you build a web app for a customer with slow PCs or other devices and the page contents are performance heavy you might want to do as much work as possible on the server so that the user does not have to wait for long. And also you can cache the rendered pages. There is even server side rendering of react pages to e.g. make the initial page load faster...
With Java and Spring I did just use JSP I don't know thymeleaf. Just use what you like and maybe what is most supported/documented.
And building websites like this does not mean you cannot use AJAX, but if you use templates you need to think about what makes sense.
What is confusing me is how can a backend server have html?
The "back end" must have HTML, because that's what's delivered to, and rendered by, the client.
It may just be that the back end "server" is just a CDN delivering, say, an HTML/JS SPA, but there's still something delivering content to the browser.
That said: server-side rendering is still a thing, and has had a resurgence lately--a React app may have its initial rendering done on the server so again the client gets a page rendered with both HTML and associated data, and then starts acting like a normal SPA.
My understanding is that the backend server exposes APIs for the frontend to use by using AJAX and the frontend will manipulate this data and present the information on the screen, why would a backend provide html code?
Because something needs to run the JS to access those APIs.
Some history:
Browsers used to suck. JS used to be a neat add-on, sites were relatively static, and essentially all rendering was done on the server. The back end would get data from wherever it got data from and generate complete HTML pages, and there was little happening on the client side other than some form fields, maybe some validation, and that was about the extent of it.
(firstly thanks for the help and time looking at this) -
OK so there are allot of frame works out there and i've been going round in circles trying to find the right language to do what I need -
I'm looking to create a web page (personal site) - which is only one page but when clicking on links (such as blog and projects) it then removes the main content on the page and re-populates it with the blog main content ect -
Ideally there would be some type of animation transition between pages -
From looking at some portfolio sites a good example of what I am trying to create is https://jasonliao.co.nz/
Any help here would be great -
Ideally to know:
what is this method called (loading pages without refreshing the page)
Can this be done using vanilla JS? (i'd love to get amazing as one language before throwing in frameworks on top of it) -
Yes I am kinda new to this side of development so any help is really appreciated - thanks,
Wally
I recommend start by learning basic JS (Java Script) then once your confident then move onto JQuery. Udemy would have a few basic courses.
What your asking is really broad as many languages and frameworks could do it. Its more what your use to or features your site will require. eg do you require back-end functions if so then you will need to use something like PHP or Node
This guy was probably using Angular or React for this. It is single page application (SPA). Whole app is loaded in the browser and if it needs some data, it will send HTTP requests to the servers and get data as JSON. If you want to make similar things with vanilla JS, you must use Ajax and do alot of DOM manipulation to achieve the same thing :)
I currently have an application that loads the html header, navigation, and footer information into an html page using separate php includes.
I am trying to re-design the application so that it no longer is dependent upon php includes (so that I can port it to PhoneGap). I have been scouring for a solution that would allow me to get the same templating functionality, while shifting the php scripts solely to the server.
I have looked at a number of the Javascript Template Frameworks - ractive, moustache, handlebars, etc. But most of those seem only data focused - which is great for that purpose, and I may use one for later. But I am looking for something to provide the bones, not the attributes. Also, each of those seems to have routing/url/seo limitations.
I have also tried some of the frameworks like Meteor, Ember, Express, and Sails but they will require a lot of additional coding to get to the same functionality I currently have - but they have the ability to define application level templating/includes. Slim Framework seems to be closest (and maybe coupling it with Twig ), but before I commit I wanted to get some feedback/option.
Is there a better way to do this?? And if so with what? And maybe even how?? Thanks all in advance for your feedback!
After looking through a number of the solutions, I feel that using jquery with handlebars. will actually be the best solution. It does not allow me to do exactly what I'd like to do, but it is close.
I will keep the module pages as separate html files in a templates folder and then inject the moustache modules into the container page using jquery ajax and/or .load.
Very basic question: I am coding a web app that has a handful of pages. These pages have the usual shared elements: eg, the site's header/masthead and a side-bar are present on all pages. The HTML is static (not dynamically generated, its "ajaxy-ness" is done client-side).
What is the best way of importing/"including" those common elements into my pages? The solution I am using is to have the HTML files contain empty place-holders
<div id="header"></div>
<div id="leftSideBar"></div>
(...)
and then do in jquery's $(document).ready():
$.get("header.html", function(html) { $("#header").html(html); });
// ....
Is this the best way to do this? I'm new to web development. : )
I guess I could also dig up a "macro-like" code-generation tool that I would run on the HTML files to replace, eg, "#header" with the contents of header.html. That way loading a page would require a single request for a single HTML file, which sounds better.
What is the smart way to achieve this? I am sure this problem has been solved a thousand times.
EDIT: The server-side is coded in Python+cherrypy. (I am assuming it is reasonable to try to keep away from dynamically generating HTML when doing "web 2.0-ish" web apps. Please correct me if I am wrong. As I said, I am very new to this environment.)
Thank you for your insights,
lara
If you want to include files, please consider using some backend language such as PHP or ASP. Javascript is not really meant to do this even if this would work.
<?php include 'other_file.php'; ?>
Using javascript to do this will lead, I think, to a poor SEO and the loading of the page might look weird for the end user. If you really don't want to use a backend language, some IDE have a way to handle templates, you could look into that.
Concerning frameworks, most of them have a way to handle templates. ASP.NET has the master page system, Ruby on Rails has layouts.
Here's an example using Rails :
<html>
...
<div id="content"> <%= yield %> </div>
...
</html>
Here all the content of a subpage will go into the "yield". Here's a link to learn more about that.
Some frameworks can handle multiple place holders.
To some extent, it depends on what you're using on the server side to render the pages. If your using server side scripts to generate the page you should be able to use a web framework (eg. Django or RubyOnRails) or even just a basic templating engine such as Genshi. Basic include functionality may even be built into the language you're using (ie. PHP)
If it's just static HTML you may want to look into setting up some form of server side includes such as Apache SSI or NGINX SSI. You'll need to pick the one that works with whichever server you're using, and you'll need enough access to install and configure the plugin or module.
Alternatively, you might want to look at using a script to generate your pages (edit, generate and deploy). A simple approach using cat / sed / awk / make (additional useful reference - Sed & Awk) may be all you need, or you might want to use a templating engine and a language such as Python or Perl.
I'd have the includes handled server-side, and this will mean fewer requests from the client, and may also have other benefits (easier to debug js, etc).
Having the server process includes really isn't going to put a major strain on it.