前端开发环境搭建

Question

I'm trying to get a good environment setup for front-end development. I want to do some javascript development.

I'm looking to figure out how to have one of those webpages that keeps reloading as I save my work in my editor. I'm using vim as an editor and Ruby on Rails with Webrick.

Any help would be great!

Answer 1

You probably want to look into a BDD tool like cucumber (rspec), although https://github.com/mynyml/holygrail looks promising!

Have a look here at http://cukes.info/ ..if you go down the rspec path and you want to do JS testing you'll need a tool like culerity ( a headless browser solution that mashes ruby with jruby, junit and cucumber ) or selenium2 webdriver which actually automates your browser ( slower but easier to set up )

capybara is a tool which attempts to integrate all these solutions, its worth a look.

Also check out Xrefresh:

http://ruby5.envylabs.com/episodes/53-episode-51-february-16-2010/stories/414-xrefresh-automatic-browser-reload-for-ruby

Answer 2

I know this is old.. but maybe new Front end developers still would like to know a modern answer to the original question:

Please give VueJS a shot! Vue comes bundled with hotreload, eslint, and other cool tools to help new developers get started! It runs locally in your browser, you can open the same 192.1... :8080 url in other devices on the same network to see your page changes on real time (helpful for responsive development)

You can create user interfaces quickly once you learn the basics. It's a small learning curve and as long as you know HTML, CSS, JS you will learn it quickly!

Theres so much more about it than i could talk here, but give it a shot and you won't regret it.

https://v2.vuejs.org/v2/guide/

Running VueJs in your local machine is so easy! like five baby steps.

install with npm

npm i -g @vue/cli @vue/cli-service-global

install with yarn

yarn global add @vue/cli @vue/cli-service-global

Now that we have Vue CLI installed globally, we can use the vue command anywhere. We'll use vue create to start a new project.

vue create vue-app

cd vue-app npm run serve

or

yarn run serve

Once that's done, you can navigate to http://localhost:8080/ to see the default page.

I've developed a small framework on VueJs to showcase front end development wireframes. Maybe you could use my example as a Boilerplate starting point to develop your front end development code. Although my code is not perfect, I do hope it helps developers get familiar with Vuejs. Learn it's wonders and create new magic :D

https://github.com/ozzgn/Vue-Wireframe-Showcase-Framework

Peace!