I wrote an angularJS app (with nodeJS and ExpressJS as my server). My app is totally independent from the server (I used pouchDB for the data). I would like to create an app/package that can be run from a computer or tablet. How can I do that?
I'm sure there are already lot of questions/answers about this topic but I couldn't find the right solution so I apologize in advance!
Thanks
If you r looking for an full-stack framework, i can really recommend Ionic.
It is a framework, that contains it's own customizable ui-framework(build on sass bootstrap), it is build on cordova aka phonegap and makes it easy to deploy and test the code on android, ios, ... . It is also optimized for angularjs and offers for most functions a directive.
I really love it. I did write a blogpost in german: kkonstantin/ionic
Maybe take your existing frontend javascript code and make use of a css framework, to make it look great for all window sizes.
Like: Ratchet (build on bootstrap)
Then you just make use of Phonegap to deploy your html/css/javascript code to the plattforms.
Related
I am trying build an application that can run offline and online too. If the application is offline it must run with minimum functionality and if it get an internet it automatically push data online Any references or tutorials would be appreciated.
any references that can help me to achieve this.
Yes, surely that's possible and you already mentioned the tools: node.js and electron are suitable. Most electron apps do that (whatsapp and joplin directly come to my mind).
You can look in the source of those already available apps, but it might be difficult. I would start with the tutorial of electron and search for the features as "check internet connectivity" (i.e. here on stackoverflow)
Your question is a bit to broadly stated to help in detail.
Yes, surely that's possible. you can use the node.js and electronJs with Angular are suitable.
For Angular and NodeJs refer the below document:
Build a Basic CRUD App with Angular and Node
For ElectronJs refer the below demo project:
Electron Samples
Best luck !!
I'm absolute new to this topic. I want to learn Typescript using NodeJS and have some simple questions. NodeJS is working with Javascript, as far as I know, but how do you get an UI? Do you have to create a HTML/CSS Webpage and run it with Typescript? How do you get Images, Options, Buttons in Typescript? How are they implemented in the Code? I found a lot of Tutorials, but they just return "Hello World" and I don't think I have to "write" the whole page in an output in Typescript.
NodeJS is pure server side javascript, you wont build the UI with it, you would serve the html/css/js to the client, and maybe create an API to communicate with the client.
I assume you dont need an example how to create a Node project, as you stated to have read some tutorials about it.
For starters, i would advise to go for NodeJS plus Expressjs on the server, then maybe start to serve simple static websites (like a handwritten 'index.html'). Expressjs makes development especially in the beginning a lot easier. Serving static files would just need something like
app.use(express.static('public'))
..in your server code. If you navigate then to e.g. localhost:3000/test/route, it would look for the /test/route/index.html in your public folder (which should be in your project root)
Then use a framework for client side development.
If you want to use Typescript for the development of the client side of the app, you might want to look into Angular. It is pretty tightly bound to Typescript, but the learning curve is pretty harsh if you are a beginner with this. Other client side frameworks that work well with Typecsript pretty much out-of-the-box or via cli are Vue.js and React, just as examples.
My understanding is that AngularJS including Angular2 is a client-side framework, while Node.JS is a server side platform. They should not cross. But all Angular2 tutorials I found use Node/NPM. Why is that?
Because npm is a package manager for packages written in JavaScript, and JavaScript can run both on client and server side. In other words, frontend and backend applications can both benefit from packages. Many development tools also use node as an underlying process (e.g. Jest-cli).
I would suggest you to use angular2 only on client side. The performance of angular2 really shines when it comes to handling view containers over regular server side codes. On the NodeJS side, I would recommend using es6 features. Which has revolutionised how you can not only code, but also performance.
The reason you see most tutorials using npm is because they are either using TypeScript or a build tool that uses Node to convert to ES5 or build your project.
However you can still build Angular2 apps using the sfx version (self-executing bundle) of Angular2 and using ES5 syntaxes without having to use node or npm. Here is a blog post that shows how to do that
http://blog.thoughtram.io/angular/2015/05/09/writing-angular-2-code-in-es5.html
Angular2 is a front-end framework but a lot of tooling that assists in building Angular2 applications are available via NPM.
If you want a package manager that's geared specifically to front-end development I suggest JSPM. It supports front-end modules of various formats (ie AMD, CommonJS, UMD), handles transpiling out of the box, and can be used as a build tool to concatenate/minify your application code.
You'll still need NPM for many other utilities and you'll need a back-end server for testing (I recommend live-server).
As far as the back-end is concerned. One of the Angular2 dev teams is working on a Node/Express extension that supports isomorphic rendering of JS. In short, it pre-renders the view on the server so the user can interact with it in the browser while the app loads in the background. The start time of launching a fully-featured SPA will still be kind of slow (relatively) but perceived speed will be instantaneous.
I have a new project which will consist of two parts...a client - SPA using AngularJS and server side using Nodejs - MongoDB. Many articles recommend using Mean.io when developing similar projects, but couldn't find any information on why this is better than simply installing Nodejs, Mongo, AngularJS and using them.
So can someone please tell me the benefits of using Mean.io over installing Node, Mongo, Angular and Express and using them? OR in other words why it is better to use Mean.io rather than downloading and installing each package/ framework individually? Thanks
well, you are going to save a lot of time with plain simple boilerplate code, in my case I've been using meanjs which helps you with a lot of basic functions like:
login using passport, local strategies, social network strategies (g+, facebook, twitter)
Twitter bootstrap
Consistent folder structure
Consistent file naming
Environment configuration for dependencies and custom "settings" (dev, test, production)
pre configured routes with controllers
software development workflow:
grunt (preconfigures task like jshint, build, test)
yeoman generator (save you a lot of time)
nodemon (for reloading pages everytime you save a page)
testing frameworks for client and server side
I can list a lot of more but the point is to mention the benefits are far beyond just by putting all 4 main pieces of software together.
for more info you can look at the overview
I want to know if there is some boilerplate code to use a frontend workflow tool like Yeoman with a backend framework like ExpressJS, if I want to maintain the same codebase for both the front and back ends.
Basically I want to know -
How do the boilerplate code produced by yeoman and express fit in together. Is there a way to integrate the two? (How does the gruntfile fit into the express project)
Can I substitute yeoman's default watch with an express server which reloads pages on update?
Yeoman is currently focused on front-end app development, but we're going to explore back-end integration in the future.
No, actually there isn't any right now.
But you can combine express.js with the component package manager. There is some work left, and you cant use yeoman components in component.
To answer your questions
You can look for components in the component repo that you have used in yeoman. Not the same, but might be a solution.
Use the module supervisor for this. You can get it via npm
I haven't found an easy way of integrating my own Express + H5BP + Angular + Grunt skeletons into Yeoman, and eventually just settled for creating a repo here: https://github.com/ericclemmons/genesis-skeleton
From what I've read, there are projects underway to add express generators, but eventually stacks are going to get complex enough to where you'll have to maintain your own starter app, rather than generating it.
There's an experimental branch with yeoman + express.js G+ Yeoman/Express Article
I found yeoman.js to be very cool for rapid prototyping but does require some ramping up to get used to the various tools it's "opinionated" about. I've decided to go over each of the core tools in some vids that are hopefully helpful: yeoman.js related videos
Yoeman fullstack generator now generates both front end and back end. Other interesting frameworks which do the same are Sails JS and StrongLoop
It is worth noting there is an express-generator project:
official docs
npm page
I am going to give it a go - because I'm folling this tutorial - but other than that I cant comment on its value.