I'm new to Javascript frameworks and looking for framework for my new projects. Until now i created simple apps using MVC framework Django with Bootstrap frontend. Thanks framework i got everything in one package with best-practice well know. For Javascript i used some jQuery libraries without understanding, just configured with doc help.
When i tried to write some Javascript on my own and found there are big changes in JS world (like ES6, TypeScript) i found it very usefull. When i found JS frameworks, i felt in love.
I have read about frameworks, watched some tutorials. As many other, i found React nice. But what i'm completely missing, is the server part. Especially React tutorials creates components or functions, nice UI, but don't cover what happens with data next. I know that React is ment as "V" in MVC. But what is the best-practice or wide-used extension for server part? Are there tutorials or book to take me further than just creating actions and UI?
Thanks for any links, i just need to point best direction. Or is React ment for just specific project parts and better to look elsewhere?
As you said, yes there are quite a number of tutorials and most of them don't cover how do you deploy node apps on the servers. I'll assume you have some server admin knowledge so I'll skip straight to the meat of the setup.
The Server Setup
Regardless of it being a simple static page, a single page API or a react app, you will need to have Node.js installed on any server you will want it to run. Second you will need a production process manager for Node.js. My personal favourite is PM2. The process manages makes sure your app is always on and restarts it if it goes down for whatever reason. You will also need a reverse proxy server (you need this for security and SEO purposes). Again, a go-to for it is Nginx (it's a competitor of Apache)
Two very good tutorials for setting up your server are
Tut #1
Tut #2
The App Setup
Apart from all the server setup you need to handle routing for your app (what happens when you to go to /blog or /login). A stable standard right now is Express.js. You can do without but then you will need to write a lot of the manual routing by hand in Node.js You will set up Express to server back your Index file and any others you may need.
A good tutorial for configuring your Express for a React app is Video Tut.
He does show a bit more but that is on later videos. You can stop once you get the gist of it.
Advanced Stuff
There's also the matter if you want the JavaScript to be rendered on the server or on the client side. For that you will need to make some more configuration for you app. The video tutorial I linked above should show you how to set that up as well if you are interested.
Related
I heard that .env file was for securing variables (like API keys) in front-end, but then I read that enviromental variables are embedded in the build.
So, what are the enviromental variables, for example, in React?
I know this is old, but people are still arguing in 2022.
Just reiterating what Jayce444 stated, because he knows what he's talking about.
React JS is a Frontend technology.
Do NOT place your API keys in your react app's .env file.
They WILL be visible to anyone who inspects your app.
Instead, you can create a backend app with an api for your front end app.
Any requests like logging in, or database interactions, send from your front-end to the back-end app.
It's a bit of extra work, but this is how you secure it.
Also, if you plan to easily port your react app to a react-native app,
you'll need the backend api to support multi-platform apps anyway!
Here is a guide that helped me with examples.
https://youtu.be/yICiz12SdI4
The guy isn't the best at explaining and Passport is currently experiencing some bugs with their version (at the time of writing this) and cookie-sessions, but I was able to trouble shoot through them.
Hope this helps!
Doing something like this is probably one of the best projects to have in a portfolio for web dev.
I am asked to project a web solution to allow vote casting in public assemblies.
The solution shall be written with node.js on the server, and javascript, possibly using angular.js on the client (since javascript is the language I know best, today :-).
The app shall run on mobile devices, and will be quite simple: it shall handle some sort of authentication, to identify the owner of the device (the 'user'), and shall show a form with two buttons (Yes and No).
The button press shall be sent to a central server (on the LAN).
The server shall collect and store the votes from the users, and shall choose when to enable the buttons (voting session opened), and when to disable them (voting session closed).
Trying to be clearer, the app shall replace current devices, which look like this one:
It's not so clear from the picture, but the device has two buttons, one for "Yes" vote, and one for "No" (there are more buttons, but their use is irrilevant, here).
Initially the app will handle only the vote casting (not the audio).
I'm totally new to web realtime programming, so I'm in doubt about which software stack of libraries to adopt for the project.
Googling around, I see socket.io could be a good solution, but I prefer asking the community, to try to find the most suited solution for the job.
So the final question: do you know of any open-source project, tutorial, bolg post, anything I could study to start designing the app I tried to describe?
Any solution, observation, opinion, real-life experience would be welcome, too...
I would also look at PubNub, which is a realtime global data stream network--here's a good voting app tutorial to get started: https://www.pubnub.com/blog/2014-11-18-power-a-realtime-voting-app-with-live-results-using-d3js/
There's great developer resources to get your started, for help, and lots of add-ons, like presence, history, and realtime charts, like EON: https://www.pubnub.com/developers/eon/
Socket.io is used essentially when you need something in realtime. The tradition RESTful APIs are a better/proven method.
To get started I would suggest reading up on the MEAN stack (also allows you to use the MongoDB database), A couple of tutorials should be a good starting point :
https://scotch.io/tutorials/setting-up-a-mean-stack-single-page-application
https://thinkster.io/mean-stack-tutorial
https://www.npmjs.com/package/slush-meanjs is a good resource to scaffold out your project. Slush is a generator that uses GULP as compared to yeoman generators which are only just beginning to implement gulp as its task-runner (currently uses grunt as the default task runner). Yeoman still doesnt have a great generator for the MEAN stack. If however you plan to exclude the database a good starting point would be to just use express on the backend and angularjs as the front end. To do this you can scaffold out a express project using generator-express (https://github.com/petecoop/generator-express) and once express is setup you can add angular to it using https://github.com/yeoman/generator-angular.
The directory would look something like this :
-app
---*client side libs*
-bin
--- www /* npm start to start the server */
-routes/ /* for all your express routing */
-test/
...
-app.js
...
For authentication you could use the scaffolded out CRUD model. If using socket.io for all the client server communication this is a good resource -
https://auth0.com/blog/2014/01/15/auth-with-socket-io/
I am going to create a big application, SAAS type.
Laravel & Angular has been decided to be used in the project. But I am new to both of these as I am cakephp background.
Now I am trying to take this decision. Whether should I keep both angular and Laravel a completely seperate projects. where Laravel is behaving purely as an API Or should I mix these both. I have seen people serving angular templates from laravel.
I'll have a mobile application for the same later, so that's another thing I have to keep in mind.
I am not sure if that's ok to ask such question here but I'll still appreciate any guidance on this here.
I would recommend separating them altogether. In this way, your projects/repos only contain one "environment" or context, which in my opinion makes everything cleaner. It also helps reusability, in that your API becomes completely app agnostic. You can of course still serve them from the same server.
Separating the components also make them easier to test in CI, because you'll only have to test one component at a time.
I'd recommend versioning the API, especially during early development, so that versions of the app can target a specific version of the API. Developing "API first" in iterations minimizes problems with compatibility between the two components as long as there are few breaking changes from the API side.
im looking forward to build RT web apps with NodeJS. Coming from Rails, I've felt in love with NodeJS and Async JS programming.
Run a few experiments with Node, and then as I search tools and resources to get used with, I got overwhelmed with the lot of stuff over there.
I found lot's of libraries and components over there, and pretty much got confused on how a large-scale well-writen and implemented RT web app should be built.
So the app will run over NodeJS, using Express framework.
I read about knockout.js, a client-side library to provide realtime stuff like automatic UI refresh, and I guess I could conbine it with jQuery.
Also, I found socket.io.
The author says:
Socket.IO aims to make realtime apps possible in every browser and mobile device, blurring the differences between the different transport mechanisms. It's care-free realtime 100% in JavaScript.
So socket.io is about compatibility.
What about backbone.js? Where does it goes to?
With so much stuff, I got shocked. What should I learn? Which modules worth studing?
Im focusing on NodeJS and Express but most books/screencasts covers old versions of nodejs. So im being guided by its official API.
Now im here asking your advice and to organize somehow all the info out there.
Correct me if my assumptions are not precise, please point me to the right direction and feel free to suggest any other module that could help on my learning.
Thanks in advance
It might be useful for you to separate the node.js server side libraries (via npm etc...) from all of the client side (browser) libraries and technologies like jquery, backbone, knockout etc... when you think about it. Even socket.io which exposes a persistent socket connection between the browser and the server (to avoid polling) does not dictate what client side technologies you use.
Focus on exposing a solid web-api ( random example ) from your server and your client technologies can be swapped, augmented etc... with no effect on the server. The only place they intersect is if you're using a view technology like Jade. It's also an option to have a pure separation where the server is just serving up the client files and your client is a thicker javascript application (using knockout, jquery etc...) calling a good server web api.
Some folks try to unify the client and server models - for example, this article using backbone and node. It depends on how much data you work with to say whether that's feasible but it does couple the client and server and makes the server stateful which can have downsides (scale out, requires affinity etc...). Personally, I get wary of that much magic (binding, state, syncing etc...). Node is about keeping things simple, light and fast. It's a fast front end network server.
My 2 cents (and some may disagree). Start with node on the server and pick your storage (mongoDb etc...). Design a solid RESTful (hypermedia) API - a good webapi regardless of the client. Then start with a basic html/css/js, maybe jquery client and add things like knockout etc... as you expand your client skills. That will allow you to replace your client technologies independent of your server as the new technology winds change (and they will).
That's the hallmark of a well designed system - the ability to replace componets/sub-systems without rewriting everything :)
Hope that helps clear up some of the fog :)
You may want to look at Meteor if you are focussing on real-time Javascript apps: http://meteor.com/
I am having great difficulty choosing which frameworks to use for an app that is about to go into development. I am a front-end guy, and my friend is doing the back-end.
Say I was developing a simple todo list app. I have a template for each item on the todo list. Ideally, I would want the server-side JavaScript to use this template as well as the client-side JavaScript.
So on page load, if there are already 5 todos in the database, the HTML will be compiled on the server. If I then add a new todo item to the list, the client-side JS will compile the HTML using the same template.
I've heard a lot of buzz about Node.js, Backbone.js, etc. It is quite overwhelming just how many options there are for this sort of thing. Can anybody give me examples of using these technologies together?
Node.js is JavaScript on the server-side, while Backbone.js is used to structure your front-end stuff elegantly, using collections, models and views.
Each of the two has their own role. For a better comparison between front-end frameworks you can check Addy Osmany's TODO list, written in a LOT of them: https://github.com/addyosmani/todomvc
There are some nice tutorials over the net on Backbone also:
- http://dailyjs.com/2011/04/04/node-tutorial-19/
- http://backbonetutorials.com/
- http://net.tutsplus.com/tutorials/javascript-ajax/getting-started-with-backbone-js/
Here's an application that combines Node.js on the server with Backbone on the client:
http://fzysqr.com/2011/02/28/nodechat-js-using-node-js-backbone-js-socket-io-and-redis-to-make-a-real-time-chat-app/
Backbone (like Node.js) is really popular so you would get a lot of help / resources online.
Sure. Check out TodoMVC to get a better idea of various alternatives.
Paste the template file at the bottom of the page. This way your client code can use it easily without making a call to get the template.
An Example using JQuery when calling your template would be
<div style="display:none" id="sample_jquery_template">
Hello ${name}
</div>
in your client side javascript code
..javascript..
person = {name:'Joe'}
$.tmpl($("#sample_jquery_template").html(), person ).appendTo( "#destinationList" );
There are enough templating solutions out there like mustache.js working on both ends.
But for working with the templates on the client-side it is helpful to have the rendered data available.
Henrik Joreteg wrote a nice article about reusing your backbone-models and syncing them between client and server.
Dav Glass from Yahoo gave a good talk showing how he ran YUI3 on the client and server with node.js.
Here is his github of the examples from the video:
You also might be interested in checking out jsdom
I just started learning node and this video really helped me see how to experiment on the server and client with node. You will see him disable javascript and the calendar still works - that was cool.
And here is a good backbone resource:
You might have a look at http://derbyjs.com/#why_not_use_rails_and_backbone
They try to achieve the following when opening a webapp:
Transmit a completely rendered page on the first request.
From then on all changes shall be directly made client side and synced to the server via ajax.
So usually the first request a user makes to a site with a "fat" client is pretty painful:
App data has to be transferred and initialized
Data has to be loaded by the Client
Data is displayed
This behavior is usually way slower than transmitting an oldschool like server side rendered page. Gmail or iCloud for example need some time to load up because they do it like this.