I am pretty new to SPA. I'd like to known if it is possible to build a SPA with only Bootstrap or I have to use a framework like Jquery mobile or angular ?
Thanks
Bootstrap is CSS, HTML and JavaScript Framework which contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions.
To Build a SPA application you have to use JavaScript libraries or Frameworks.
From http://tutorialzine.com/2015/02/single-page-app-without-a-framework/ you can get an idea of SPA without javascript frameworks.
There are a lot of open source JavaScript frameworks that help with building SPA, such as:
Angular
React
Ember
Aurelia
Vue.js
Cycle.js
Backbone
You have to use JS framework.
Bootstrap is only CSS framework. It makes your application looks better. Ok, you can use custom datepickers, modals etc, but usually this functionalities are implemented in CSS frameworks like Boostrap by jQuery. You can check this page to confirm it. You need JS framework for SPA (or create a new one).
Related
I have a website based on Vue framework and webpack.
I came across this css framework developed by Google (Material Components Web) where you can directly get started using a cdn or an npm package. It worked extremely well for a simple html/javascript based website. But, I am having issues setting it up for the Vue project.
There are other wrappers available for Vue framework like Veutify and Vue Material. But, it comes with lot of additional stuff like the grid layout which I don't want the developers to follow as we are already using a flex layout. I only want the component library.
So, is there a way use the Material Components Web with the Vue framework?
I didn't get the Material Components Web working with the Vue framework. But I did found another light-weight material design framework i.e. Material Design Lite.
Note: It is not specific to any framework. It lets you add Material Design look to your website developed in any framework
You can easily get started with a wide variety of options like cdn, bower, npm or even by downloading the files.
Material Components Web has modular architecture. Each component or API is distributed as a separate package. It means that you can use them separately, although there are some dependencies.
Also there is "root" package - material-components-web, which just references all other packages.
By default, when you add a package, it will not be included in your app. You'll need to import component's SCSS and optionally JavaScript. Basically like you would use any other component.
Reference this Vue app template as an example. As you can see here, it references only subset of MDC's components/APIs.
I have a Gatsby project that uses Theme UI and Netlify CMS.
How can I style the Netlify CMS preview pane with my Theme UI styles?
Netlify CMS doesn't support CSS-in-JS libraries:
https://github.com/netlify/netlify-cms/issues/793
Unlike Styled Components, it doesn't seem possible to convince Emotion to inject its styles into the Netlify iframe, either. There does appear to be some support for injecting raw CSS into the preview iframe:
https://github.com/netlify/netlify-cms/pull/1162
But so far I can't seem to figure out how to make any of this work together on my own.
Could you please explain what is the main difference between different Vue installation methods for building a one-page website (page routing) with Vue and an Electron app using Vue:
importing Vue.js library via <script>
installing it via Vue-CLI
This installation guide doesn't really help understand the difference.
Is my site / app going to work slower if I just import Vue via <script>?
The <script> include is for including the Vue library in your webpage just like you would any other JavaScript library. Vue will be available on the window object for you to access globally. All external JavaScript must be included like this one way or another, even if you use vue-cli.
vue-cli is just a tool which generates Vue projects from templates. The setup really depends on the template that you use; I imagine most people would probably use the webpack template for medium to large sized Vue projects. This will initialize a node project directory containing all files necessary to develop, debug, test and build a Vue project. Webpack takes care of bundling all modules into a single JavaScript bundle which is included into the webpage via <script>. You can also benefit from vue-loader which allows you to write Vue components in *.vue files.
Is my site / app going to work slower if I just import Vue via <script>?
I mean, not really, no (your development speed might be hindered though since you won't benefit from all the bells and whistles that vue-cli sets you up with). Your question applies more to the development approach that you will follow for developing a Vue web application.
Would it be possible to use jQuery Bootstrap with Aurelia? There are some toggle buttons and other components I would like to use that come with Bootstrap.
So far, all of the examples I have seen are using jQuery UI along with Aurelia.
Take a look at the skeleton-navigation project. It uses bootstrap by default:
https://github.com/aurelia/skeleton-navigation/tree/master/skeleton-es2016
The magic happens here
https://github.com/aurelia/skeleton-navigation/blob/master/skeleton-es2016/src/main.js#L1
import 'bootstrap';
Note that bootstrap is installed via JSPM.
How can we use DOJO from CDN in OpenSocial App?
Can it be done in OpenSocial Apps? From Frequently Asked Questions – OpenSocial:
What other JavaScript libraries can I use?
All of them! Dojo, Prototype, JQuery, GWT, etc.
As you can see Dojo is mentioned explicitly.
You can include it using a script tag in your HTML snippet as regular Dojo. The only difference is that modules are loaded asynchronously — it is covered in the docs.