I am developing a web app that has a page that displays updates and announcements. I am not familiar with how other websites accomplish this. Do people store their announcements/updates in a database and just update their database whenever they have a new announcement?
What are the standard methods that people use to accomplish something like this at scale?
Basically what you want is a backend that runs a websocket port for clients to bind to. So a client would send his request to post an announcement, this could be via the web socket or any other API( REST, SOAP, GraphQL).
The server can then save the announcements in its Database or/and push update to all the clients attached that an announcement was added through the websocket port. Then the client can handle the response from the server according to its logic.
To fetch announcements for clients which were not connected at the time of announcement via websocket, you can just reply with all the announcements made after a client disconnected.
There are a lot of possible solution, all with different degree of difficulty and flexibility:
1. Hardcode everything in your HTML page
It's the easier solution in the short term, but it would become harder and harder as the projects grows. I would not suggest doing this even for smaller projects.
2. Save the list on a committed data source
For example, create a JSON file in your project with the following structure:
[
{
"type": "announcement",
"date": "2020-08-18",
"title": "New announcement!",
"content": "Bla bla bla...",
},
{
"type": "update",
"date": "2020-08-18",
"title": "Version 2.1.0",
"content": "Here is the changelog: ...",
},
]
Then your webapp can load this file and render it accordingly. This approach has some advantages:
You don't need to rewrite all the boilerplate html everytime
The changes on the update page are committed, so they are easier to review or cancel
However, you still need to insert html in your content field and that could be problematic to do by hand everytime (especially if you need to add images, tables or more complex elements). Also, the changes are in the codebase, so they can not be delegated to a not-technical person (such as the marketing manager).
Also, it is not very efficient to load and parse a json file everytime. You can add some caching, but it's still not as performant as a database
3. Save the list manually in the database
This solution is very similar to number (2). It provides some performance improvement, but most of the other disadvantages remains valid.
4. Use a database and implement a GUI for creating/editing/publishing announcements
The ideal solution is to use a database, while also implementing in the backend a restricted area where it is possible to manage the announcements using a WYSIWYG editor.
Advantages:
Maximum flexibility and it does not require writing the HTML by hand everytime
Anyone can write and publish the announcement, it does not have to be a developer
Disadvantages:
You need to develop the whole editing/publishing system
I don't know whats your programming language or technologies you're using. But, I guess you want a realtime updates and announcement. I'm suggesting you to use realtime databases like FCM to handle it:
https://firebase.google.com/docs/cloud-messaging/concept-options?hl=id
In this example, it using NodeJS:
https://thecodebarbarian.com/sending-web-push-notifications-from-node-js.html
It depends upon how you want to handle it.
Some use this technique of storing in a database and updating it.
Another approach is that you can simply use a web crawler to import the announcement/notices if you are taking references from another websites and you won't need to create a database too. But, your website will be little bit slow but will save the memory for database.
The standard method for putting text onto webpages without hardcoding it is using a content management system or CMS. This can be big and complex, or simple and lightweight.
The approach I've seen work best is to use a "headless CMS", which gives non-technical people a UI to enter the content, and an API which allows your application to grab that content (e.g. as JSON), and render it in whichever framework you're using. This works for "Announcements", or other text content like FAQs, terms & conditions etc.
Another approach is to use a "static site generator" which takes text in a specific format and spits it out as HTML. You could use this to build a pipeline to take "announcements" written in markdown and committed to Git, which are converted by the static site generator into an HTML snippet, which you then render using your NodeJS application.
As stated before, a CMS (content management system) is probably the way to go. If you haven't decided on how to build your web app, I would strongly advise you to use a web framework.
If you are in search of a good solution I would recommend Django and Django CMS.
Both are well documented, open-source and can scale as needed.
Django:
https://docs.djangoproject.com/en/3.1/contents/
Django CMS:
http://docs.django-cms.org/en/latest/
Related
I am evaluating how is it possible to implement Server Side Rendering in SPA app with React and CMS as backend.
This is the approach I see Next.js suggest to have per-rendered and all most all CMS system suggests:
User request a page from react app running on Node server
Node server requests JSON data from CMS through fetch call
Then React App reads this JSON and transform HTML into String like renderToString() and sends the response back to the user.
The disadvantage of this approach is that if JSON data from CMS is huge then first request takes long time.
What alternate solution do you suggest?
Heyooo, Contentful DevRel here. 👋🏻
your concerns are absolutely valid.
And that's why Next.js just recently added advanced static pre-generation using getStaticProps. The goal is to tackle the long dynamic response times by pre-generating as much as possible. This way the user has a fast initial content paint, but can still enjoy all the dynamic benefits that come with a React application (Next.js usually follows an isomorphic JavaScript architecture)
The processing time you describe then is moved from dynamic request/response time into build-processes.
In general, when you're not dealing with millions of pages, I recommend giving static HTML a try. It makes applications often faster, safer, and more secure. For more complext and larger sites, Vercel is also experimenting with hybrid solutions that offer ways to only pre-generate certain pages. That's all very new though. :)
I want to design a blog which will contain several articles. In the home page several tiles will provide links to the articles and when a user clicks on a particular tile with an article's title on it, he will be redirected to a new page having that complete article.
I understand that making a single page application will be of little help in this case.
Will it make sense if I design the whole website using Angular JS? If yes, how should I proceed if I want to design it using Angular JS? Should I avoid using routing since I've learnt that it is primarily used for SPAs, and shall I use $location or something for this instead? Or shall drop the idea of designing using Angular JS at all? Has anyone of you ever designed a multi-page application using Angular JS?
Your guidance will be helpful.
Before identifying the language to use for designing an app, it is important to understand what your app would be doing. In your case, a blog.
and if you analyze the app's functionality, the below three items (there are/could be more but for this use case, these three are sufficient) gain prominence:
Flow
Data
UX
The 1. Flow says that you may not have a SPA but a MPA, which means considering the resources that go into making of the pages, the user experience, it being a blog, a user may not have all that commitment (or patience) to remain with the blog if each click results in a request sent to the server and a heavy duty page served for the user to read through. This means that routes (Express or Angular) are ideal to navigate the user through the blog.
Data
A blog typically contains text and users may perform text search, which means that you need to figure out the right data store for your data ie., text.
This leads you to select the most optimally suited database that is also economical - SQL Server provides for Full text search at a cost of some hefty dollars; MySql does, too, and obviously with no or lesser cost; MongoDb, a document db, gives you the same and with no additional cost (unless you opt for the cloud model). So, SQL Server is not ideal since the app is not (most likely not, being a blog) meant to generate any profits; MySQL is ideal if you use a PHP server and PHP dev; MongoDb is ideal because it enables wrapping the model with the request object thereby, eliminating extensive coding to read the DB and write to the view.
Eg.
(in the router page of the landing Blog page)
var router = express.Router();
var posts = mongoose.model('BlogPosts');
router.get('/get, function(req, res) {
res.json(req.posts); // As simple as this
});
(in the view)
<div ng-repeat="post in infiniteitems">...</div>
(in the controller)
$.ajax({
url: '<url to your route>',
type: 'GET',
dataType: 'json',
success: function(data) {
$scope.infiniteitems=data; // Binds to the controller item in the view
$scope.$apply();
},
error: function() { },
beforeSend: setHeader
});
So, you have the navigation, the view, the data all taken care of with just a few lines of code. More importantly, no innodb or database engine
The code is meant only for explanatory purpose.
Because MongoDB returns a document as JSON and binding a view to a JSON is pretty simple than binding an object or XML values!
Obviously, this means a MVC framework and so AngularJs is the right choice.
UX - Angular Material, when used in conjunction with AngularJS, provides some scintillating designs, colors and animations and the simplicity adds to performance, enhances the UX and renders a freshness to the View (for the user) that is not easily creatable with other technologies.
So, go for Angular.
And also, because MongoDB works pretty well with NodeJS, the whole thing works together which is why they call it the MEAN stack - MongoDB, Express, AngularJS, NodeJS!
I was wondering if anyone could help me at all.
I posted a previous question in regards to this title but I didn't receive much of a response (probably due to lack of information).
I started out with an Ionic Application and built the view files using state URLS to navigate from page to page in the WWW folder. I've then created corresponding controllers for the view files, for basic calls and functionality that I want my app to do in the front-end via Ionic.
My question is how do I setup MongoDB + Mongoose so I can have access to the models I have created?
I have scoured the internet but to no avail, I mean I know there is no set way to define a model within this type of application but some general guidance would be really appreciated.
I understand that when building an application with Angular you're essentially building 2 applications, the front-end where your CSS, JS and HTML goes with the front-end frameworks on top of them.
Then the backend application that runs the server, stores data and runs the business logic. This is where I have created the User Schema model for my application and have inserted a document into my database via the MongoDB shell whilst running mongod.
However I also created a users.js in another models folder in my front-end where I'm returning a resource following a url with either a get, save, query, remove or delete.
First of all I would like to say I'm relatively new to building mobile applications so this may even be entirely wrong and secondly up to this point I get lost as to what to do in my application.
I have tried setting up an express server in my app.js file and I can connect to it via my terminal as it is listening on the port number, but in the browser it is coming up with cannot /GET.
If you need any more information please feel free to ask, I know I haven't really gone into any technicals, but I'm really not sure even if I'm asking the right questions to begin with.
Thank you in advance.
I've been learning Java for more than 6 months. I'm developing a web app and learning through building it. I'm using Glassfish Server and MySql. No frameworks. Using Servlet, JSP and EJB.
Now I'm querying database through JSP page and displaying results. Is this the best way? or Should I use servlet for querying database and displaying results in JSP?
I want to display only part of the resultset object and show the remaining if the user wants to see it. So Could I implement this using jsp alone?
I would recommend usind your Servlet to handle the database-connunication only and perhaps some logging on the usage of the Connection. The logic would best be implemented in JSP alone since you can better maintenance it.
Querying database through JSP page is not the best way. And because you are not using any framework is definitely not the best way to learn. While learning you need to try as much frameworks as possible to find out which one you can use or not to use. You are also need to learn patterns for building Java EE applications.
Should I use servlet for querying database and displaying results in jsp?
This approach is much better, but is not enough because of coupling database code with servlet code.
I want to display only part of the resultset object and show the remaining if the user wants to see it. So Could I implement this using jsp alone?
What do you want to display should be coded in the servlet.
You should avoid coding your business logic codes in your JSPs. Segrate your application into multiple layers, take a look at MVC design pattern.
Model: These are plain POJO classes where your DB transaction and business logic happens.
Controller: This is where your servlets goes. These classes accept user request, call appropriate Model classes and send response to view.
View: This is you JSPs, displays data to users. Avoid using Scriptlets in your Jsps. Use JSTL and EL.
Take a quick look at this example MVC application, and do your own searching on MVC. Hope it helps you to get started.
I can I implement following workflow with MarionetteJs:
User opens site by URL
Server generates HTML + JSON data
MarionetteJs reads JSON data and "attaches" to generated HTML. So it doesn't rerender templates.
User do something -> MarionetteJs updates DOM, sends server requests, etc
So the main problem for me is 3 - attach point. What is the best way to implement dual rendering with MarionetteJs?
This is something that hasn't been baked in to Marionette, yet. I've seen a number of other people solve this for Backbone in general, and it might be easy enough to take their solutions in to account.
Hopefully someone will have an answer for you, though. I'd love to see an add-on or plugin, or pull request to the project for this.