I've started curating an old web project based on tons of java code (old spring version) and a singular monolithic frontend module a.k.a. "The web-module" and I'm trying to upgrade the build steps and migrate old angularJS code bit by bit.
The idea was to implement Redux as a single point of truth between old and new code and Webpack for bundling new js files (vanillaJS/React) and other assets and integrating them in the old .jsp files that are littered with lots and lots of good old tags.
The old code is a mix of Javascript, jQuery and AngularJS, events are handled by jquery, I'm getting lots of funny side effects of conflicting / competing angularJS $scopes for every module I touched so far.
How does a sane individual integrate dist/ files generated by webpack into old .jsp files without messing everything up and/or losing her/his sanity? I feel kinda overwhelmed by all the things that might go wrong and I'm searching everywhere for success stories of people trying stuff like this. All I could find so far were migration guides but that's not an option with about 80-100 legacy angularJS files that would have to be rewritten for webpack so I need a solution that works side by side until I've managed to rewrite all the old angularJS Modules, one update at a time.
Related
This may sound like a strange question, but I come from an emacs,xterm background and I am used to work a few files and have total control of what I am doing.
Now, I am going to learn react and vue, but when I examine the number of files that are generated for a project with:
npx create-react-app
vue create app
then it adds upp to 36000 for react and 19000 for vue. That is something that annoys me. Is there any way to create a project in both framework that has significally less files?
What you are referring to is scaffolding. You do not require scaffolding to use vue.
You are also using build components to minify JS code and include all types of things such as fall backs.
If you want to learn it from scratch you can start with the CDN version then move onto learning to use the templating engines and so on.
If you really want to start to learn things from scratch.
Use CDN Versions
Learn Rollup.js
Learn Vue
I know its base on what you need, but in bare minimum what would be the best start up frameworks, task runners, plugins etc to develop real world web application? Im a noob but I think Il set it up as using:
Npm, angularjs ,jquery, expressjs, grunt, bower, bootstrap?
Then you just check which plugin you need for particular job?
Because alot of tutorials are pretty focus on just the angular side of things but never a real world development environment that could help with the job.
And follow up question is it advisable to have a dst and src folder and when youre done put everything in dst? What would be your take on this matter? Thank you
And for your question, I would suggest Angular CLI. It creates all the boilerplate to start coding in Angular, including task manager with all most all the tasks you need, CSS and boiler plates, etc.. It even has a command-line interface which would help you create components, classes, services, etc of your app from the terminal.
I don't understand why the generator-ionic (along with other ionic + Yeoman project)s are so popular.
I don't see what the advantages are in using a yeomen generator in this case, this is.
I understand why the Ionic framework is useful in a Cordova project (as we all know, the UI, ngCordova plugins, it uses AngularJS, ect) but what specifically does the Yeoman component add that a basic Ionic project doesn't already have or that cannot be easily added with a bower install.
It seems to me that the Yeoman ionic projects just seem to be unnecessary bloat and can lead to more errors and library issues. I just do not see how components like karma and grunt (as opposed to ionic using gulp) fit into help with development.
True, you can set all this up by yourself. However, imagine setting this up on each and every project that you start. Kind of cumbersome, don't you think?
That's why some people tend to create these generators - to save you (if you like) the time of having to scaffold your application every time from beginning. Usually they provide some features (about which you can read on the Github pages) or they may even enforce some kind of project directory layout (which may help with big projects).
All in all, you don't have to use them, or stress about them. For instance, I personally don't use them on every project, but I appreciate the community effort and when I want to try something quick I tend to test them from time to time to see how they've evolved.
Don't hate, donate ;) (Sure sure, I know you're not hating, the statement just seemed appropriate).
I am trying to get better at coding and am trying to figure out exactly what front end stack I need. I have red a lot and about a lot of tools but it is too much and I don't know which ones work good together or not.
Currently my idea is to do a web app with the design principles of Material Design from google and use angular for the logic of the front end.
I have red about and used these tools: Angular.js, Material Design Lite, Angular-material, polymer, ionic, bootstrap, Materialize and other various material design frameworks.
I am playing with this demo that I wanted to try out Material Design Lite but went too further and ended up needing Polymer for some input drop-down components. Playing further more with MDL I found out that it is not sufficient as bootstrap as I am used to work and would like to have this in it, but don't get me wrong I like MDL.
ionic has some good features for the local server and easy set up of template app as well other nice things like export to ios,android app, push notifications, but I ended up deleting ionic.css cause it was interfering with MDL and Polymer
I am asking some more experienced web app developers to help me out with this stack dilemma. I would like to get this out of my mind so I can be free and develop more.
Also tools like GRUNT, BOWER and so on? which one is the best in my case?
note: if u got interested the back end would be cakePhP and Mysql and the data type is going to be JSON (angular will send json to php into DB).
It can be overwhelming trying to learn all the tools and using them at the same time. My advice is to just use the tools when you need to.
If your web app is simple you may not even need a framework like angular. If you want to play with material design, you can do that with the css classes that MD lite offers no matter if you use angular / polymer / or plain javascript. ( If you want to use Polymer you already have some material design styles included. )
Some people prefer starting with the most simple solution and keep adding more sophisticated tools gradually. Others prefer starting with a more complex solution that has integrated the best practices, and in that case using a "Starter kit" may be useful.
Regarding Grunt/gulp... etc. You could worry about that later when you need to have a "build system" to do tasks like compressing files, optimising images and other things that are important for publishing.
After years doing frontend development i realised that is not possible to master all the tools available ( and having a life outside code ). You eventually settle for some tools (everybody have different preferences) and the important experience comes with solving real problems.
i would recommend you to use angular-material for your project if :
you have good knowledge of angularjs or if you find it interesting to learn
you have gone through google design and you want to implement it in angularjs way
try implementing missing features or take online help
Angular-material team is working on adding more and more features as already build in directives and services. Check releases on github page & demo guide
( Drop downs are already there in latest version as menu)
Few points
Google has an awesome open source guide for design.
Angular-material is a framework that helps you implement and follow that design language and principles using angularjs.
Bootstrap is just a framework which gives implementation of css, js related to front end work. Look and feel will be entirely different from google design.
Ionic is again a completely different framework which provides implementation and guide for mobile app development.
You can read about diff in angular-material/bootstrap/ionic in my post here
Bower/Grunt
bower ( package manager) and grunt ( task runner) are tools which work in node environment.
if your development environment is nodejs you should use them to get work done quickly and efficiently.
Check there sites for more information.
cakePhp/mySql
If your backend runs on these and you have angularjs in frontend.
Angularjs can make restfull calls in JSON to your api and it would all work good.
I looked into gruntjs but I'm not sure if it the right tool to solve my workflow problem. I' working on a huge angular project with 30+ js files already into it. Every time I add a new js file, I have to go to index file and add reference in it. Is there any way to automate this process with grunt or any other tool?
Absolutely! Here are two ways:
Yeoman
Yeoman is a set of integrated workflow management scripts built on Grunt and Bower that supports automatic scaffolding and compilation. There is an AngularJS generator for it too.
ngBoilerplate
This is my creation, so I definitely have a bias here, but it has a Grunt-based built system and a defined directory structure that makes managing non-trivial AngularJS apps super easy.