I have been messing around with embejs and I have been using default index.html with script tags to render templates on the page, sufice to say my index.html file is littered with:
<script type="text/x-handlebars" data-template-name="aisis">
</script>
That I would like to split up. Now I have worked with ember a little bit in rails applications, but this app doesn't have a back end, doesn't use anything other then javascript and html as its a simple internal app.
My question is, how do I split this up into partials and various other templates and still keep the app nice and small, nice and simple? I have seen a bunch of ember tools out there that generate or scaffold projects for you, but I get lost and confused fast. Where as the way I have been doing it has taught me a lot, it's just my project is massive in one index file...
Ember is designed so that each route should correspond against a template. Whenever you enter a new route, a corresponding template will automatically be rendered unless you override the "renderTemplate" hook.
Try going through the "getting started" guide here: http://emberjs.com/guides/
I would recommend looking at the yeoman suite of tools: http://yeoman.io/
It includes an Ember generator that will scaffold your project, create your bower dependencies, generate a grunt file for builds, etc. Install generator-ember to get started with the scaffolding.
Just create an empty folder, and from there use yo ember to get a complete working app. Take a look at what is generated and you can get some ideas of what to incorporate in your app.
I would check out Ember App Kit. It lets you break up the templates into various files in addition to automatically importing correct modules, linting your code and providing various build options.
Ember App Kit (EAK) is a robust starter kit for developing
applications in Ember.js. EAK makes it easy to develop, build, test,
and deploy applications independent of any back-end build process.
Related
I'm learning nodejs and vuejs to modify an already created web site.
I installed nodejs, vue and vue-cli and I launched "npm run serve" which apparently start "vue-cli-serve serve"
The problem is that I don't understand what this web server do on files, in this documentation : https://cli.vuejs.org/guide/prototyping.html , it's told:
It automatically infers the entry file in the current directory - the entry can be one of main.js, index.js, App.vue or app.vue. You can also explicitly specify the entry file:
vue serve MyComponent.vue
Ok, but does it run main.js, does it include it into a js file which is the loaded by the index.html on the client broswer.
I see in the browser that the page load a js file named like that: app.23d...js
My question is how this js file is created?
For instance, when the content of main.js is this one:
import './css/icon.css'
Vue.use(VueResource)
Vue.use(VueScrollTo)
what is the output in the app....js file?
It seems it doesn't work at all like php which I usually use on web server
Thank you
Vue uses Webpack to convert your potentially-numerous distinct .js files into bundles with names like app.23d92ab88708...js
From the Webpack documentation:
Concepts
At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph from one or more entry points and then combines every module your project needs into one or more bundles, which are static assets to serve your content from.
I don't suggest trying to get into the details of how Webpack works
This will take a lot of time. If you have an existing Vue project, you are much better off spending your time interpreting that as a Vue project, and accepting that the conversion into the actual app.23d.....js file or files is an automatic process that you do not need to involve yourself in.
It will avoid a colossal waste of time
It won't advance your understanding of how the Vue project works
Whatever you learn about the exact workings of today's Webpack, may be completely wrong about tomorrow's Webpack.
Nevertheless the interface that Webpack provides to you as a Vue programmer will remain constant over future versions.
This is the concept of software abstraction. It is highly advantageous to not have to know how every step of every process works, as long as you know how it is designed to respond to actions you take at a high level.
Horrific thought
I have just re-read your opening sentence:
I'm learning nodejs and vuejs to modify an already created web site.
Please tell me that you are not trying to modify an already created web site where you only have the compiled website available, without the Vue source code? That would be a stupendously painful enterprise.
I'm using Webpack as core for all my front-end js project since more than a year. I'm starting to work with KRPano to create customized virtual tour. My goal is to be able to continue using my module style developement with Webpack, and include KRPano to this kind of project.
Actually the framework is a JS file with several functions to embed the viewer etc... And several js files that contains all krpano plugins.
I tried to just export the krpano file functions and include that in my project, but i got several errors and impossible de compile.
Wanted to know if someone ever done something like that, or if is there an alternative to webpack that will allow me to solve that issue ?
Thanks,
Navalex.
There are many similar frameworks. And each for their own purposes. Frameworks like Electron, Cordova may suit you. On Cordova, I created APK from Krpano tour and worked fine on my phone
Maybe your problem is that krpano is already "webpacked" and depending on which framework are you working you need the builded version and a server running.
What i have done is:
create react app
import vtour folder inisde src (for example)
navigate with a single button into vtour/index.html
build js app (react in my case)
add vtour files in the same route in builded app
sumbit to githubpages or glitch.me or something to test
Result Example:
https://imaciap.github.io/Manresa360Deploy/
I have a production application whose folder structure is much like you would expect:
/project
/css
/js
/php
/fonts
/images
/index.php
I have recently begun learning to use react.js and I would like to start developing new features using react while leaving all existing functionality as is and I understand that react.js can certainly be used this way.
What isn't entirely clear, is how to structure the files in my non node.js project and access them.
For example, I tried searching for this and found this article which proposes the following structure
and states:
Here index.jsx works as the entry point of the application. It uses ReactDOM.render to render App and gets the party started. App in turn does something interesting with Note. If I wanted yet another component, you would simply add it below /components.
Presumably this is a node.js project where index.jsx can call something like require('components/App.jsx');, but how do I achieve the same in my non node.js project.
Consider if I set the following folder structure:
/project
/css
/js
/php
/fonts
/images
/react
/components
/App.jsx
/Note.jsx
/scripts
/featureFoo.jsx
/index.php
Given the above, I'd like to have index.php load react/scripts/featureFoo.jsx which would somehow include/use react/components/App.jsx and react/components/Note.jsx
I figure I could have script tags in index.php to load all of the components then featureFoo.jsx but I feel like there is a more react way to do this.
So
How can I structure/access the react components of my non node.js application?
Im tagging node.js as I feel those users may well bring insight regarding this possibly from having to deal with multiple projects/aproaches.
In order to import/require other modules in a non-node.js (i.e. browser-based) JS application, you'll need to use a bundler such as webpack or browserify.
They work by starting at your "entry" file (index.jsx in your case) and recursively following all of your imports/requires. Then it smartly bundles everything up into a single "output" file, which includes everything your application uses, that you can link in your HTML.
You can also use more complex configurations with multiple entry and output files, or even dynamic loading of "chunks" at certain points in your application. But the above is the most basic use case, and works well for most simpler projects.
These bundlers have some other cool features as well. For instance, with webpack (with additional plugins and loaders) you can:
Write ES6/ES7 JavaScript that gets compiled (via babel) into cross-browser compatible ES5
minify/uglify your output JS
import/require non-js files such as CSS, images, and webfonts, and choose how to process these imports (e.g. pre/post-process your CSS, or optimize your images)
Extract all imported CSS into a single .css file
Use webpack-dev-server (or webpack-dev-middleware) to take advantage of hot module replacement, which makes developing JS apps easier by letting you see your changes take effect instantly in the browser without having to refresh or lose your app's state.
And a lot more. The world of bundlers is a pretty big ecosystem with a lot to learn, but it's totally worth getting into.
A good place to get started is the excellent Survive JS series of tutorials.
However, if you're still learning React, then diving into webpack and the entire ecosystem of JavaScript tooling can be overwhelming. It will probably be easier and a more efficient use of your time to keep things simple at first, and then only get into bundlers etc. after you get comfortable with React.
I make ember project from this guide . But i have something like default application - routes and etc . How can i delete this and start from scratch ?
This guide is how to start ember using ember-cli. I am sure this is the main road to build ember apps. Ember-cli has conventional directory-files structure, you could see it when you run ember new my-app-name. For example all routes are in the app/routes directory and etc. You may delete all files/directories you don't need, but all files you use (or ember-cli uses) must be in the conventional directory.
As far as I understand, you'd like to begin with something simpler. You can start with simple html file, using any default jsbin you like, for example http://emberjs.jsbin.com/?html,css,js,output
Community usually use such jsbins for demonstrating issues. See jsbins collection here https://gist.github.com/rwjblue/8816372
I am trying to build an angular js web project. The project will be such that, on UI side, I will have html with angular to handle presentation. Data on/from UI will be obtained/posted using ajax.
These ajax calls will take us to one of the methods in spring controller. These method will connect to another Rest WS application to obtain data / save data.
I have been able to understand the Angular JS framework and I feel comfortable to an extent working on it now. However I have no experience in designing an application structure from scratch. I have read http://scotch.io/tutorials/javascript/angularjs-best-practices-directory-structure to understand the directory structure's best practices.
I have integrated angular with my eclipse IDE.
Now, my question is, how should I go ahead with designing my application. Will it be the way we normally use js in a J2EE application? Or it is to be done in some other better/advisable way?
Any help is appreciated.
PS: Is it advisable to build an angular JS as static Web Project? I read this somewhere, I cant find the link now.
Thanks
Here are some tips:
Separate your javascript files and organize them so that they are functionally together.
Setup multiple SPAs if necessary, and organize your files/folders in the same way for each SPA:
home\index.html
home\index.js
home\index-controller.js
home\module.js // contains the Angular module definition
home\templates\user-control1.html
admin\index.html
admin\index.js
admin\index-controller.js
admin\module.js
admin\templates\user-control2.html
Create Angular UI modules specific to your application so that they can be re-used
shared\your-ui.js // this angular module contains UI directives
shared\your-ui\directives\table.js
shared\your-ui\directives\table-controller.js
shared\your-ui\directives\templates\user-control.html
shared\your-ui\services\test-service.js
Use Grunt or Gulp to build your JS files, minify them, run automated tests, and deploy them to where they need to be. Deploy your Angular UI modules and deploy your App.js module.
Use a javascript module loader (RequireJS, Webpack) so that dependent files can remain separate.