Questions: What is the correct / proper structure of Frontend and Backend together? How do I publish whole project after It's done? Will it just work if I copy it all to some host? (I know I have to modify DB paths and stuff, I'm worried about all the updating that composer does.. or am I understanding it all wrong)?
Short explanation of how I got here: I'm a student developing a Time management web application (Projects, Tasks..). I have knowledge of PHP (Slim), JS (JQuery, Angular), HTML, CSS (Bootstrap), SQL. My development flow was first creating a database and setting up an Apache server (Linux). After that I started coding by simply creating a folder, adding sub-folders for backend (DB operations..) and frontend (js, css, view, images...) when I needed them. All the includes were downloaded when I needed them (jquery, bootstrap etc.). I never used composer/ npm /bower.. Which brings me to this:
Current situation: I was about to upgrade form Slim 2 to Slim 3. In the last 6 hours of googling I've completely lost motivation and at the moment I feel like I have no idea what I'm doing. Almost every article/tutorial I read gives me different information: Composer? Bower? npm? Yo?... I feel like I'm doing it all wrong. I tried few of those seeds that create a clean project for you.. WHAT ARE ALL THOSE FILES. I even tried one that creates clean structure of Angular and Slim in one project. Needlessly to say I'm completely lost. I feel like I did all those 100 hours of coding while I should be studying for nothing, since i have no idea how to properly use it.
I'd really appreciate any tip, suggestion, links to stuff that'll help. I feel like all the knowledge of coding I have is just useless since I have no idea how to use it properly. Thank you
This is very simple to work with composer and npm for Slim3 and Angular2
both are different files and main folders
For Slim you will use composer to download all files in vendor folder
For Angular you will use npm to install all files in node_modules
folder
Even the required file is different composer.json for slim and package.json for Angular.
I use Slim with Angular 4 now inaa project and every thing is going smoothly
I don't know what kind of problems you faced, but I'm sure both can work together
Related
I'm trying to start my first web project. My experience is with .NET desktop development and I'm very new to the Java/Kotlin world. Client side I want to use React and write the code in Kotlin, then transpile to JavaScript. Server side I would like to use Ktor both to serve the static content (React app + various assets) and REST endpoints for the SPA. I would like to use the Multiplatform feature to be able to share as much code as possible. My IDE is IntelliJ IDEA.
I would like to have auto-reload and be able to debug both React and server code for development and I would like to be able to create a single fat jar with the complete application (frontend+backend).
I started with the template that IntelliJ provides for multiplatform JS+JVM. I have been working on it for more than one day with little success and also haven't been able to find any sample online with all the features, and also haven't been able to combine various samples due to insufficient knowledge. Only thing I got is either running the application without autoreload or creating the jar file by adding "manifest" to the build.gradle file which breaks my run configuration.
I would very much appreciate if someone could provide or point me to an example with these features which I can use as an starting point for my application.
Here is a link to an example to get you started.
https://play.kotlinlang.org/hands-on/Full%20Stack%20Web%20App%20with%20Kotlin%20Multiplatform/01_Introduction
I'm trying to decide if I should use Angular CLI for a new project. My primary reason for doing so would be to avoid the hassles of setting up a new project right now and instead focus on learning the new Angular and building the application.
I'm coming from Angular 1.x so the hassles for me stem from learning all the new tooling in addition to the new Angular. Most of the docs reference systemjs but webpack seems like the direction the community is moving in so I would like to go that route.
I would prefer to learn and become comfortable with the Angular toolchain (including webpack) but I'd like to push that off a little if possible. I generally don't prefer "black boxes" like the CLI.
I would like to start by using the CLI and then break away at a point in the future when I have time to invest in learning more about webpack, etc. My question is: What limitations does the CLI put on me, can I easily break away from it in the future, and generally what else should I consider before using it as a quick way to get started?
I started working with Angular 2 while it was in Alpha, long before Angular-cli was available. During this early stage I struggled with the build environment - I was using systemjs and a whole pile of self-built spaghetti code of gulp tasks to handle transpiling, minifying, bundling etc. For every hour I spent writing angular code, however, it seemed I was spending two hours on the build environment. Did I learn alot? Sure. Was it a good use of my time? Not very.
The angular-cli changed all of that. It was built by the Angular team to accomplish all of the development and build tasks that an angular developer needs. It is always improving and when there have been problems they have been address quickly. I now can create an ng2 project in a few minutes with "ng new projectname --style=scss." I can run immediately in development mode with "ng serve." Changes automatically get compiled. I can build for production with "ng build -prod -aot" and have my entire ng2 project ready for production in minutes with Ahead of Time (aot) pre-compilation and tree-shaking.
So my advise to anyone would be this. If you want to quickly get into the serious work of building ng2 apps, and not waste your time re-creating the build and production environments yourself, then use angular-cli.
If you have time to burn and want to learn more about what's underneath the hood with angular2, then have a go at it yourself; you will certainly gain a better understanding of things; but you'll just end up using angular-cli anyway.
I am going to argue against using the CLI.
I have been using Angular 2 from the early days before RC. Indeed there was a lot of confusion back then, having to deal with all these packaging solutions (require.js, system.js, webpack). I got to admit that it was not a pleasant time back then, and it drained a lot of time.
BUT
Nowadays, I have a strong skill set in setting up builds and deployments. I have experimented with lots of possible ways to configure it and to achieve greatness. Recently we had to develop a plugins architecture for our webapp at the office. Guess what, knowing webpack has saved my skin big time. I was able to find an initial solution which was not that great. Eventually, after polishing it and taking advantage of webpack, we have created a really nice solution, with minimal code, without interfering in either webpack or angular architecture.
There is no chance that I would have been able to do this without all the pain of having to deal with webpack constantly. I hear very often misconceptions from my peers about how webpack and angular works. I do my best to explain stuff, but nothing beats doing it yourself. I'm sorry to say, but hiding behind the CLI will do you no good. A senior developer that I can trust to create new architecture must have solid webpack, angular and typescript know-how.
If you do not understand these tools properly you will be relegated to the menial tasks of applying existing patterns never to be trusted to go out there in the wild jungle and creat the new architecture for others to follow. You need to be able to think for yourself and to take your own decisions.
Conclusion
See whether or not the CLI is the tool for your current task and choose accordingly. Don't just blindly follow the first advice you see. If you are in charge of a project and you have to call the shots, knowing webpack is a must.
I am in same situation as you, but after doing a lot of research on the subject, I have come to the conclution, that it is perfectly fine to use the CLI to build Angular 2 projects.
The CLI is supported by the Angular team and in constant development with a big community - even turorials and the NG2-Book use the CLI as the configuration.
The CLI use Webpack integrated and exposes the configuration through the CLI json, but I read that soon it is possible to use command 'ng eject' to eject the webpack config file itself (if needed).
I believe the future (even now), that it's normal to use the CLI with integrated webpack, instead of using Webpack as a seperate bundler.
I know that all these components exist, however I really am trying to figure out if someone has brought all these together.
Here is what I need:
JavaScript/NodeJS core application boilerplate/framework
With a website, HTML app (aka PhoneGap or even better Ionic), and ideally option to add something like a desktop app (like electron) client flexibility
All with possibility of different/specialized frontend code so all assets and HTML could be packaged into the app
Ideally kept in one GIT repo
With shared code amongst all UIs
Ability to use Angular 2 in all environments (or something similar)
Realtime? standardized data connection with data source (like meteor's DDP), I really dislike polling and I don't want to have to write my own data protocol
Have some kind of authentication capacity
Already exist in some way
What I have been eyeballing thus far is Ionic2 on top of Meteor, however it is remarkably difficult to find an actually working example of them playing together and I have not found any with separate codebases between the two interfaces.
To clarify, below is sort-of what I envision for a folder structure:
public/
common/
models/
business-logic/
server/
web/
desktop/
mobile/
And in that, all UIs and server can import from the common folder.
The end goal is to have something like Slack where they have 3 different ways of accessing the same data using the same rules but can really specialize in each interface type.
Does this exist?
I am really looking to have something that can be started with:
git clone http://github.com/a/bc
npm install
# do some other things that are documented
meteor run ios
Or am I not gonna have my cake and be able to eat it too?
I know I am shooting for the moon, but I know I can't be the first person looking to do this
For the backend I think that LoopBack may be a good bet if you want fast developement.
They have some examples for iOS, Android and Angular apps on their website:
You may get some ideas from their documentation or several example projects on GitHub.
LoopBack is currently backed by IBM.
My question may be inapropriate but I'm asking anyway. When I check some websites developped with angular, with the code inspector you don't see the applications JS files (app.js, controller, ...). But when I'm checking mine I see everything and it can bring a large security issue.
Do you know the way of "hiding" them please ? Thanks in advance.
Picture showing what i'm talking about
You need to bundle your files in one single file. During this process you can even minify and/or uglify your code so that it is more hard to read. This should be done for production only because in development, you want to be able to debug your code with readable code.
You can use tools like gulp which is pretty easy to master and can do a lot of great automated stuff for prod and dev environment.
Here is a nice Getting Started with Gulp or go to the Official Website
If you make a search in SO with "gulp bundle", im sure you will find some similar questions.
I'm about to start a pretty huge project.
This project is a website.
The backend will be made with Node
The frontend will be made mostly with Angular
Backend is going to be an API (which is cool with Angular) but also (later) for an Android app.
Frontend is going to be a fork of this repo : https://github.com/maxime1992/webTemplate and I want to be able to pull from upstream to keep the fork up to date.
I am wondering. How should I manage it?
Should I create only one repo, containing back and frontend with Git submodule or subtree.
Should I create two separated repos, one for the frontend, one for the backend and then use symlink to have them together? But if someone wants to run it on Windows ... Too bad.
I want this project to be open source on GitHub so I would like to have something clear and easy for everyone :)
Tell me how you would do it, what's good, what's wrong ... I'm really curious!
As indicated in the comments, Git submodules (or Git subtrees) are not the right solution for this. Use a dependency management tool for this, which will work cross-platform (Linux, Mac, Windows), and is the standard way of doing this.
Separating your backend and frontend into separate projects is a good idea, as it will allow you to manage projects independently and add functionality or additional client applications later without bloating your application.
Since you're already using Angular for the frontend, I suggest you take a look at Bower, which is the de-facto standard dependency management tool for frontend projects. It allows you to define a bower.json file to define your dependencies, e.g. Angular and other frontend libraries, allowing you to assemble your frontend project without having to download and store libraries manually.
In your backend project, you would then also add a bower.json file which declares your frontend project as a dependency by pointing to its Git location and branch. Bower will then take care of downloading your frontend project and adding it into your backend project.
Check out some of the popular Bower tutorials for more info on this...
You can use bower link to automatically create symlinks between your projects - this will work across operating systems as well.
Some other tools that you might want to check out:
Yeoman for scaffolding a base project. There are some nice generators for scaffolding Angular projects, including things like LESS/SASS and Bootstrap (https://github.com/yeoman/generator-angular)
Wiredep for automatically wiring your Bower dependencies into your index.html file.
Getting your initial project setup right will be important. You can start small and grow things to a more advanced configuration later.